Artykuł
06/14/2011

Samouczek CSS - Marginesy i dopełnienia

Autor: Karol Stoiński

Opublikowano: 2011-06-14

Tworząc strony internetowe za pomocą znaczników HTML, budujemy logiczny schemat naszej strony. Za pomocą CSS definiujemy jej wygląd, czyli położenie elementów względem innych, ich kolor, obramowanie itp.

Często zdarza się, że elementy zawarte w odpowiednich znacznikach HTML chcemy wyróżnić poprzez odseparowanie ich od reszty zawartości. Możemy też chcieć, aby zawartość znajdująca się w blokach, takich jak <p> czy <div>, była odsunięta od krawędzi tego bloku. Aby tego dokonać, musimy użyć w naszym zdefiniowanym stylu własności margin oraz padding.

Po przeczytaniu tego artykułu będziesz:

Wiedział, czym są i jak zachowują się marginesy, a jak dopełnienia,
potrafił używać tych właściwości,
mógł odseparować elementy na swojej stronie tak, aby były bardziej czytelne.

Implementacja

Na początku przyjrzyjmy się temu, co różni marginesy (margin) od dopełnienia (padding). Najlepiej uczyć się na przykładach, dlatego spójrzmy na poniższy kod.

CSS:

#element {
margin: 20px;
padding: 20px;
background: LightSeaGreen;
}

Plik HTML:

<div id="element">
To jest przykładowy tekst
</div>

Poniżej znajduje się efekt, jaki uzyskaliśmy. Dodatkowo zaznaczone zostały odległości reprezentujące margin i padding.

**Rys.1.Przykład marginesu i dopełnienia.

Jak widzimy, wartość margin jest odległością pomiędzy obramowaniem bloku (w tym przypadku <div>), a innym elementem, którym może być np. obramowanie okna bądź inny blok. Wartość padding określa odległość pomiędzy obramowaniem a zawartością. Przez ustawienie tego atrybutu wtedy, gdy np. posiadamy ramkę zdefiniowaną przez właściwość border, tekst nie będzie się z nią zlewał, co znacznie poprawi jego czytelność. W tym przypadku, gdy podaliśmy atrybutom tylko jeden argument, zarówno marginesy jak i dopełnienie są równe 20px ze wszystkich czterech stron.

Jako ciekawostkę warto dodać, że standardowo znacznik <body> posiada zdefiniowany kilkupikselowy margines oddzielający zawartość naszej strony od obramowania okna, co czasem po prostu nam przeszkadza, gdy np. chcemy, aby grafika przygotowywanego przez nas szablonu strony stykała się bezpośrednio z tym obramowaniem. Wystarczy wtedy zdefiniować krótki styl, który ustawi tę wartość na 0:

body {
margin: 0px;
}

Marginesy

Poznaliśmy już jak ogólnie działają marginesy oraz dopełnienia. Proste ich tworzenie dookoła obramowania bloku to jednak nie wszystko, co oferuje nam CSS. Przejdźmy zatem do bardziej szczegółowego opisu atrybutu margin.

Atrybut może przyjmować trzy różne typy wartości. Pierwszą z nich może być słowo auto, które określa, że ustawienie marginesu zostawiamy przeglądarce, przez co efekt zastosowania takiej wartości może być zależny od silnika renderującego zastosowanego w przeglądarce. Drugi sposób określenia wielkości marginesu jest podanie jego wartości liczbowej podanej w pikselach (px), centymetrach (cm), pt, em itd. – np. 100px lub 2em. Trzecim i ostatnim sposobem zapisu jest podanie wartości procentowej, np. 20%, co będzie odpowiadało marginesowi ustawionemu na 20% wielkości bloku, który zawiera dany element.

Możemy również zdefiniować marginesy dla każdego z boków osobno. Służą do tego dodatkowe atrybuty: margin-top (góra), margin-bottom (dół), margin-right (prawo) oraz margin-left (lewo). Przykładowo:

#element {
margin-top: 10px;
margin-bottom: 10%;
margin-left: 2em;
margin-right: auto;
}

Styl ten ustawi elementowi o id „element” margines górny na 10 pikseli, margines dolny na 10% wielkości bloku zawierającego dany element, margines lewy na 2em, a ustawienie prawego marginesu zostawiamy do wyboru przeglądarce. W przypadku gdy nie zdefiniowalibyśmy któregoś z tych atrybutów, przyjąłby on wartość domyślną, która wynosi 0. Wyjątkiem jest jedynie sytuacja, gdy dany element dziedziczy wartości atrybutów (np. gdy zmieniamy właściwości stylu któregoś ze znaczników HTML), przez co niezdefiniowanie przez nas atrybutu niekoniecznie oznacza jego zerową wartość.

**Rys.2.Przykład bloku o id „element” o marginesach zdefiniowanych tak jak w powyższym przykładzie.

Zapisywanie czterech oddzielnych atrybutów może być dość niewygodne. Na szczęście twórcy standardu CSS pomyśleli nad skróceniem zapisu. Zastosowanie zapisu zbiorczego może także zwiększyć czytelność pliku ze zdefiniowanymi stylami. W tym zapisie przykład, który był podany powyżej, wyglądałby następująco:

#element {
margin: 10px auto 10% 2em;
}

Kolejność, w jakiej podajemy wielkości marginesów, jest następująca: górny, prawy, dolny, lewy. Jak łatwo zauważyć, kolejność ta jest po prostu zgodna z ruchem wskazówek zegara.

Występuje także postać dwuargumentowa zapisu skróconego:

#element {
margin: 10px 20px;
}

Taki zapis zdefiniuje wielkość marginesu górnego i dolnego na 10px, a lewego i prawego na 20px.

**Rys.3.Przykład bloku o id „element” o marginesach zdefiniowanych tak jak w powyższym przykładzie.

Atrybut margin posiada jeszcze jedną ciekawą i przydatną funkcjonalność. Otóż pozwala on na wyśrodkowanie elementu. Aby uzyskać taki efekt, dodatkowo niezależny od przeglądarki, należy w definicji stylu danego elementu margin ustawić na auto, a w definicji stylu bloku zawierającego ten element atrybut text-align ustawić na center. Poniżej przykładowy kod elementu wyśrodkowanego, będącego bezpośrednio pomiędzy znacznikami <body>, oraz wynik w przeglądarce.

CSS:

body {
text-align: center;
}

#element {
padding: 20px;
width: 100px;
margin: auto;
background: LightSeaGreen;
}

Plik HTML:

<body>
<div id=”element”>To jest przykładowy tekst</div>
</body>

**Rys.4.Przykład wyśrodkowania elementu.

Dopełnienia

Jak już wiemy, dopełnienie (padding) definiuje nam odległość pomiędzy obramowaniem bloku a jego zawartością. Pozwala to na wizualne oddzielenie treści od krawędzi bloku, co na ogół poprawia efekt wizualny i sprawia, że treść jest bardziej czytelna.

Mamy dwa sposoby na określenie wielkości dopełnienia i są one analogiczne do tych, jakie mamy do dyspozycji w przypadku atrybutu margin – brak jedynie trybu auto. Zatem pierwszym sposobem jest ustawienie wartości na wielkość wyrażoną liczbowo w px, cm, itd. Drugim zaś wyrażenie jej za pomocą procentów, które ustawiają dopełnienie w zależności od wielkości bloku zawierającego.

Podobnie jak przy marginesach, dopełnienie możemy ustawiać niezależenie z każdej strony. Służą do tego atrybuty: padding-top (góra), padding-bottom (dół), padding-right (prawo) i padding-left (lewo). Jako przykład możemy podać dany styl:

#element {
padding-top: 10px;
padding-bottom: 10%;
padding-left: 2em;
padding-right: 10pt;
}

Ustawi on dopełnienie górne na 10 pikseli, dolne na 10% wielkości bloku zawierającego, lewe na 2em, a prawe – 10pt. W przypadku nieustawienia którejś z tych wartości, przyjmowana jest wartość 0, o ile nie została ona odziedziczona.

**Rys.5.Przykład bloku o id „element” o dopełnieniu zdefiniowanym tak jak w powyższym przykładzie.

Także w przypadku dopełnienia możemy stosować skrócony zapis. Kod umieszczony we wcześniejszym przykładzie wyglądałby zatem następująco:

#element {
padding: 10px 10pt 10% 2em;
}

Dla przypomnienia – wartości te podawane są w kolejności góra, prawo, dół, lewo.

Tutaj także występuje postać dwuargumentowa zapisu skróconego:

#element {
padding: 10px 20px;
}

Taki zapis zdefiniuje wielkość dopełnienia górnego i dolnego na 10px, a lewego i prawego na 20px.

**Rys.6.Przykład bloku o id „element” o dopełnieniu zdefiniowanym tak jak w powyższym przykładzie.

Podsumowanie

W tym artykule zapoznaliśmy się ze sposobem działania dwóch atrybutów występujących w CSS – margin oraz padding. Dzięki nim możemy dokładnie kontrolować odstępy pomiędzy wyświetlanymi blokami oraz odstępy pomiędzy obramowaniem bloku a treścią. Dobrze wykorzystując te atrybuty jesteśmy w stanie zwiększyć znacznie czytelność naszej strony oraz poprawić jej wygląd.

Udostępnij za pośrednictwem