Model pudełkowy CSS: z czego składa się szerokość elementu
Każdy element na stronie jest prostokątnym pudełkiem złożonym z czterech warstw. W środku znajduje się treść, wokół niej margines wewnętrzny (padding), dalej obramowanie (border), a na samym zewnątrz margines zewnętrzny (margin), czyli odstęp od sąsiadów. Tło i kolor obramowania obejmują trzy pierwsze warstwy, natomiast margines zewnętrzny pozostaje przezroczysty.
Przy domyślnym ustawieniu content-box właściwość width opisuje wyłącznie szerokość treści. Wszystko, co dołożysz w paddingu i obramowaniu, powiększa element ponad zadeklarowaną liczbę, dlatego dwa elementy o tej samej wartości width potrafią zajmować różną szerokość. Zapis box-sizing z wartością border-box odwraca tę zasadę: wtedy width obejmuje już padding i obramowanie, a kurczy się sama treść.
Marginesy zewnętrzne sąsiadujących elementów blokowych łączą się w jeden, równy większemu z nich, zamiast się sumować. To zachowanie nazywa się scalaniem marginesów i dotyczy odstępów pionowych, a nie poziomych. Przy zadaniach egzaminacyjnych warto najpierw sprawdzić, o co właściwie pyta polecenie: o szerokość samego elementu czy o miejsce, które zajmuje on wraz z odstępem.
Przykład: element o szerokości 200 pikseli
1
Element ma width 200px, padding 20px z każdej strony i obramowanie o grubości 2px.
2
Przy content-box szerokość całkowita to 200 plus dwa razy 20 plus dwa razy 2, czyli 244 piksele.
3
Po dodaniu box-sizing: border-box element zajmuje dokładnie 200 pikseli.
4
Na treść zostaje wtedy 200 minus 40 pikseli paddingu i 4 piksele obramowania, czyli 156 pikseli.
Najczęstsze pytania
?
Czym różni się padding od margin?
Padding to odstęp wewnątrz elementu, między treścią a obramowaniem, i obejmuje go tło elementu. Margin to odstęp na zewnątrz obramowania, oddzielający element od sąsiadów, i pozostaje przezroczysty.
?
Co robi box-sizing: border-box?
Sprawia, że zadeklarowana szerokość obejmuje treść razem z paddingiem i obramowaniem. Element ma wtedy dokładnie tyle pikseli, ile wpisano w width, a miejsce ubywa treści, a nie przybywa pudełku.
?
Jak obliczyć szerokość całkowitą elementu?
Przy content-box dodaj do wartości width lewy i prawy padding oraz lewe i prawe obramowanie. Przy border-box szerokość całkowita jest już równa wartości width. Margines zewnętrzny w obu przypadkach dolicza się osobno.
?
Dlaczego dwa marginesy pod sobą nie sumują się?
Bo pionowe marginesy sąsiadujących elementów blokowych scalają się w jeden, równy większemu z nich. Odstęp między akapitem z marginesem 20px a kolejnym z marginesem 30px wyniesie więc 30, a nie 50 pikseli.
?
W jakiej kolejności podaje się cztery wartości margin i padding?
Zgodnie z ruchem wskazówek zegara, zaczynając od góry: góra, prawo, dół, lewo. Zapis padding: 50px 20px 40px 30px ustawia więc 50 pikseli u góry, 20 z prawej, 40 u dołu i 30 z lewej. Dwie wartości oznaczają kolejno pion i poziom, a trzy: górę, oba boki i dół.
Gdzie ćwiczyć dalej
lekcje kursu o tym zagadnieniu
narzędzia z tej samej rodziny