5. Model polowy CSS

Jak już wiesz z rozdziału Model formatowania wizualnego CSS, dla każdego elementu HTML obecnego na stronie internetowej w CSS jest tworzone specjalne pole — poziomu blokowego, jeśli element jest blokowy, lub poziomu śródliniowego, jeśli element jest śródliniowy.

Model formatowania wizualnego opisuje interakcje między tymi polami oraz sposoby ich rozmieszczenia w zależności od różnych czynników i ustawień określonych własności CSS. Z kolei model polowy CSS (ang. CSS box model) opisuje budowę tych pól oraz interakcje zachodzące między ich poszczególnymi składnikami, którymi są treść, dopełnienie, obramowanie i marginesy.

Pola elementów blokowych i pola elementów śródliniowych mają taką samą budowę według modelu polowego CSS, ale różnią się między sobą pod względem sposobu interpretacji ustawień niektórych własności. Poniższy opis dotyczy w całości pól blokowych. Natomiast w sekcji Pola śródliniowe w modelu polowym znajduje się objaśnienie kwestii specyficznych dla pól śródliniowych w modelu polowym.

Budowa pola CSS

Pole CSS to prostokątny obszar treści (ang. content area), który może być otoczony z dowolnej liczby stron obszarami dopełnienia (ang. padding), obramowania (ang. border) i marginesu (ang. margin). Wymiary i ewentualnie inne właściwości każdego z tych obszarów można ustawiać za pomocą odpowiednich własności CSS. Poniższa ilustracja przedstawia schematycznie budowę pola CSS.

Każdy z tych obszarów ma cztery krawędzie (ang. edge): górną, prawą, dolną i lewą. Szerokość każdego z tych obszarów można definiować osobno lub zbiorczo, tzn. pole może mieć na przykład lewy margines o szerokości 20 pikseli, prawy margines o szerokości 10 pikseli, a dolny i górny margines o zerowej szerokości. To samo dotyczy obramowania i dopełnienia. Poniżej znajduje się opis poszczególnych elementów pola CSS.

Obszar treści (ang. content area)

Prostokątny obszar obejmujący treść właściwą elementu. Jego wymiary mogą być ustawione za pomocą własności width i height lub być uzależnione od rozmiaru treści albo elementu zawierającego. Z czterech stron otaczają go krawędzie treści (ang. content edge) — żółta linia.

Obszar dopełnienia (ang. padding area)

Prostokątny obszar otaczający pole treści, którego zadaniem jest odsunięcie krawędzi treści od obramowania na określoną odległość. Z czterech stron otaczają go krawędzie dopełnienia (ang. padding edge) – szara linia.

Szczegółowy opis własności CSS służących do ustawiania właściwości dopełnienia znajduje się w rozdziale Dopełnienie CSS.

Obszar obramowania (ang. border area)

Obszar obramowania pełni funkcję ozdobną. W jego tle można na przykład ustawić obraz graficzny lub jednolity kolor. Z czterech stron otaczają go krawędzie obramowania (ang. border edge) – niebieska linia.

Szczegółowy opis własności CSS służących do ustawiania właściwości obramowania znajduje się w rozdziale Obramowanie CSS.

Obszar marginesu (ang. margin area)

Obszar marginesu pola otacza obszar obramowania, a jego funkcją jest odsunięcie pola od innych pól znajdujących się w sąsiedztwie. Zawsze jest przezroczysty i jako jedyny z czterech składników modelu polowego może mieć wartość ujemną. Z czterech stron otaczają go krawędzie marginesu (ang. margin edge) – zielona linia.

Szczegółowy opis własności CSS służących do ustawiania właściwości marginesów znajduje się w rozdziale Margines CSS.

Standardowy model polowy

Domyślnie własności CSS określające szerokość i wysokość elementów HTML (np. width i height) odnoszą się do obszaru treści, czyli obszaru znajdującego się w obrębie żółtej linii na powyższym schemacie budowy pola CSS. Ewentualne obramowanie i dopełnienie, jeśli zostaną zdefiniowane, są dodawane do tych wartości. Jest to tzw. standardowy model polowy (ang. standard box model).

div {
  width: 100px;
  height: 100px;
  padding: 20px;
  border-width: 10px;
}

Ta reguła ustawia szerokość i wysokość elementów div na 100 pikseli, ale w rzeczywistości ich pola będą zajmować więcej miejsca zarówno w poziomie, jak i pionie, ponieważ zostaną do nich doliczone wartości dopełnienia i obramowania.

Całkowita szerokość pól elementów div w tym przykładzie będzie wynosiła: 100 pikseli (szerokość treści) + 20 pikseli (szerokość lewego dopełnienia) + 20 pikseli (szerokość prawego dopełnienia) + 10 pikseli (szerokość lewego obramowania) + 10 pikseli (szerokość prawego obramowania) = 160 pikseli.

Analogicznie całkowita wysokość pól elementów div w tym przykładzie będzie wynosiła: 100 pikseli (wysokość treści) + 20 pikseli (szerokość górnego dopełnienia) + 20 pikseli (szerokość dolnego dopełnienia) + 10 pikseli (szerokość górnego obramowania) + 10 pikseli (szerokość dolnego obramowania) = 160 pikseli. Spójrz na poniższy rysunek.

To znaczy, że aby ustawić pożądaną szerokość i wysokość elementu na stronie, nie wystarczy tylko odpowiednio zdefiniować własności width i height, lecz trzeba jeszcze uwzględnić szerokości dopełnienia i obramowania, co wymaga wykonywania dodatkowych obliczeń.

Gdybyśmy w naszym przykładzie zmienili szerokość dopełnienia z wszystkich stron na 10 pikseli, to pola elementów div miałyby po 140 pikseli szerokości i wysokości całkowitej.

Nie wszystkim podobał się ten sposób działania modelu polowego, w efekcie czego powstał tzw. alternatywny model polowy, który jest pozbawiony tej wady.

Alternatywny model polowy

Alternatywny model polowy CSS (ang. alternate box model) określa szerokość i wysokość pól HTML w całości, tzn. ustawienia takich własności jak width i height odnoszą się do szerokości i wysokości całego pola (wszystkiego, co znajduje się między krawędziami obramowania – zielona linia na powyższym schemacie budowy pola CSS), a nie tylko do jego treści.

Aby włączyć alternatywny model polowy, należy użyć własności box-sizing i nadać jej wartość border-box. Na przykład:

div {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border-width: 10px;
}

Teraz pola elementów div na naszej stronie zawsze będą prostokątami o szerokości 200 pikseli i wysokości 100 pikseli. Zmiany szerokości dopełnienia i obramowania będą powodowały tylko zmiany tego, ile miejsca pozostanie na treść właściwą.

W tym przykładzie szerokość całkowita elementów div wynosi 200 pikseli. Obszary dopełnienia z lewej i prawej strony w sumie mają szerokość 40 pikseli, a obszary obramowania z lewej i prawej strony w sumie mają 20 pikseli. To znaczy, że na treść w poziomie pozostaje 200 – 40 – 20 = 140 pikseli.

Wysokość całkowita elementów div wynosi 100 pikseli. Obszary dopełnienia górnego i dolnego w sumie mają szerokość 40 pikseli, a obszary obramowania górnego i dolnego w sumie mają 20 pikseli. To znaczy, że na treść w pionie pozostaje 100 – 40 – 20 = 40 pikseli.

Jeśli szerokość dopełnienia z wszystkich stron zmienimy na 10 pikseli, to obszar treści będzie miał 160 pikseli szerokości i 60 pikseli wysokości.

Krótko mówiąc, w alternatywnym modelu polowym rozmiar obszaru treści jest wypadkową ustawień szerokości i wysokości elementu HTML oraz szerokości jego dopełnienia i obramowania.

Natomiast w standardowym modelu polowym własności width i height określają tylko rozmiar obszaru treści pola, do którego dodawane są szerokości dopełnienia i obramowania.

Ustawienia marginesów w obu przypadkach nie mają wpływu na rozmiar samego pola, ale mają wpływ na ilość zajmowanego przez nie miejsca na stronie. Margines to pusta przestrzeń oddzielająca dany element od innych elementów znajdujących się w jego sąsiedztwie, więc im jest szerszy, tym bardziej zwiększa zajmowany przez pole obszar.

Pola śródliniowe w modelu polowym

Model polowy odnosi się zarówno do pól blokowych, jak i śródliniowych, ale te drugie obsługują tylko niektóre wchodzące w jego skład własności.

Marginesy pól śródliniowych

Pola śródliniowe w pełni obsługują tylko lewy i prawy margines, tzn. można im definiować także marginesy górny i dolny, ale nie będzie to miało żadnego efektu.

Dopełnienie pól śródliniowych

Pola śródliniowe obsługują własności dopełnienia, ale pełny efekt mają tylko dopełnienie lewe i prawe. Dopełnienie górne i dolne też działają, ale nie powodują przesunięcia elementów sąsiadujących. Jednak inaczej niż w przypadku marginesów pionowych, efekt ich zastosowania można zaobserwować, jeśli zdefiniuje się dodatkowo obramowanie. Spójrz na poniższy kod:

span {
  border: 1px solid black;
  padding: 8px;
}
...
<div>Lorem ipsum dolor sit amet. Lorem ipsum.</divgt;
<div>Lorem <span>ipsum dolor sit amet.</span> Lorem ipsum.</div>
<div>Lorem ipsum dolor sit amet. Lorem ipsum.</div>

Poniższy zrzut ekranu przedstawia efekt interpretacji tego kodu przez przeglądarkę internetową.

Jak widać na tym zrzucie ekranu, dopełnienie elementu span zostało zastosowane z każdej strony, ale tylko poziome wartości spowodowały przesunięcie sąsiedniej treści.

Dopełnienie górne i dolne przesunęły tylko obramowanie elementu, którego dotyczą, natomiast nie poruszyły elementów znajdujących się przed ani za omawianym elementem, przez co obramowanie znalazło się na nich.

Obramowanie pól śródliniowych

Własności obramowania elementów śródliniowych działają podobnie, jak własności dopełnienia, tzn. są stosowane, ale nie powodują przesunięcia elementów sąsiadujących z danym elementem od góry i od dołu, np.:

span {border: 10px solid lightpink;}
...
<div>Lorem ipsum dolor sit amet. Lorem ipsum.</div>
<div>Lorem <span>ipsum dolor sit amet</span>.</div>
<div>Lorem ipsum dolor sit amet. Lorem ipsum.</div>

Poniżej znajduje się zrzut ekranu przedstawiający efekt działania tego kodu w przeglądarce internetowej:

Na tym zrzucie widać, że szerokie obramowanie spowodowało odsunięcie elementu, dla którego jest zdefiniowane, od treści sąsiadującej z nim po lewej i po prawej stronie. Natomiast elementy sąsiadujące od góry i od dołu pozostały na swoim miejscu, przez co obramowanie nałożyło się częściowo na ich treść.

Ustawienia szerokości i wysokości

Własności width i height nie są obsługiwane przez pola śródliniowe.