5. Model polowy CSS

> Dodaj do ulubionych

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.

Schemat budowy pola CSS
Schemat budowy pola CSS ÔÇö kolorowe linie oznaczaj─ů kraw─Ödzie otaczanych przez nie obszar├│w

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).

Na przykład:
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.

Schemat pola CSS
Schemat pola CSS elementu div z powyższego przykładu

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─ů.

Ilustracja dzia┼éania w┼éasno┼Ťci dope┼énienia w elementach ┼Ťr├│dliniowych
Ilustracja dzia┼éania w┼éasno┼Ťci dope┼énienia w elementach ┼Ťr├│dliniowych
Ilustracja dzia┼éania w┼éasno┼Ťci dope┼énienia w elementach ┼Ťr├│dliniowych

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:

Obramowanie p├│l ┼Ťr├│dliniowych

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.