ZAWODNIK

Model pudełkowy: margin, border, padding, width i box-sizing

INF.03 · teoria
autor: redakcja · 08.09.2026
Cztery warstwy każdego elementu strony: treść, margines wewnętrzny padding, obramowanie border i margines zewnętrzny margin. Jak policzyć szerokość całkowitą bloku, co zostaje na treść i co zmienia box-sizing: border-box. Lekcja 4.5 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: cssĆwicz dział: css
Model pu­deł­ko­wy (box model) to sposób, w jaki prze­glą­dar­ka liczy miej­sce zaj­mo­wa­ne przez ele­ment: w środku stoi treść, wokół niej wy­peł­nie­nie, dalej ob­ra­mo­wa­nie, a na ze­wnątrz mar­gi­nes od­su­wa­ją­cy ele­ment od są­sia­dów. Każdy ele­ment strony jest takim pro­sto­ką­tem, więc bez tego ra­chun­ku nie da się prze­wi­dzieć, ile miej­sca zajmie panel ani dla­cze­go dwie ko­lum­ny prze­sta­ły mie­ścić się obok siebie. W części pi­sem­nej wra­ca­ją py­ta­nia ra­chun­ko­we („jaką sze­ro­kość strony po­zo­sta­wio­no na jej treść", „jaka jest cał­ko­wi­ta sze­ro­kość bloku"), py­ta­nia o nazwy („mar­gi­nes we­wnętrz­ny to padding", „ob­ra­mo­wa­nie o sze­ro­ko­ści 2 px oraz mar­gi­ne­sy we­wnątrz tego ob­ra­mo­wa­nia") oraz ry­su­nek z tłem Teal i krop­ko­wa­ną ramką, do któ­re­go trzeba dobrać kod. W za­da­niu prak­tycz­nym arkusz podaje mar­gi­ne­sy ze­wnętrz­ne i we­wnętrz­ne, sze­ro­ko­ści paneli w pro­cen­tach, wy­so­ko­ści w pik­se­lach, brak ob­ra­mo­wa­nia i za­okrą­gle­nie na­roż­ni­ków 5 px, czyli same wła­ści­wo­ści z tej lekcji.

Cztery war­stwy pu­deł­ka

War­stwa to jeden z czte­rech pier­ście­ni, z któ­rych zbu­do­wa­ny jest każdy ele­ment. Idąc od środka na ze­wnątrz: content (treść) to obszar zajęty przez tekst albo obraz, opi­sa­ny wła­ści­wo­ścia­mi width (sze­ro­kość) i height (wy­so­kość). padding (wy­peł­nie­nie, mar­gi­nes we­wnętrz­ny) to odstęp między tre­ścią a ob­ra­mo­wa­niem. border (ob­ra­mo­wa­nie) to linia ry­so­wa­na wokół wy­peł­nie­nia. margin (mar­gi­nes ze­wnętrz­ny) to pusty odstęp poza ob­ra­mo­wa­niem, od­dzie­la­ją­cy ele­ment od są­sia­dów.
Cztery warstwy pudełka od środka: treść 200 na 100 px, padding 20 px, obramowanie 4 px i margines 10 px, razem 248 px, a przy border-box treść ma 152 px
Tło ele­men­tu, usta­wia­ne wła­ści­wo­ścią background-color, sięga pod treść, pod wy­peł­nie­nie i pod ob­ra­mo­wa­nie, ale pod mar­gi­nes już nie: mar­gi­nes jest zawsze prze­zro­czy­sty i widać przez niego tło ele­men­tu nad­rzęd­ne­go. Stąd prak­tycz­na róż­ni­ca między dwiema war­stwa­mi, które mylą się naj­czę­ściej: zwięk­sze­nie padding po­więk­sza ko­lo­ro­wy pro­sto­kąt, bo tło rośnie razem z nim, a zwięk­sze­nie margin tylko odsuwa ten pro­sto­kąt od reszty strony. Poza ob­ra­mo­wa­niem da się na­ry­so­wać jesz­cze jedną linię, wła­ści­wo­ścią outline (obrys), która nie zaj­mu­je miej­sca w pu­deł­ku i nie prze­su­wa są­sia­dów, więc kolor wi­docz­ny NA ZEWNĄTRZ ob­ra­mo­wa­nia po­cho­dzi wła­śnie z niej.
Ob­ra­mo­wa­nie opi­su­ją trzy wła­ści­wo­ści: border-width (sze­ro­kość linii, zwykle w pik­se­lach), border-style (styl linii) i border-color (kolor linii). Bez po­da­ne­go stylu ob­ra­mo­wa­nie w ogóle się nie pokaże, choćby sze­ro­kość była usta­wio­na.
War­tość border-style
Jak wy­glą­da linia
solid
ciągła
dashed
kre­sko­wa­na
dotted
krop­ko­wa­na
double
po­dwój­na, dwie cien­kie linie z prze­rwą
none
brak ob­ra­mo­wa­nia, także brak za­ję­te­go miej­sca
Skrót border: 4px dotted Teal; podaje wszyst­kie trzy w jednym wier­szu i w tej wła­śnie ko­lej­no­ści: sze­ro­kość, styl, kolor. Po­je­dyn­czą kra­wędź usta­wia się osobno wła­ści­wo­ścia­mi border-left, border-right, border-top i border-bottom, więc zapis border-left: 3px solid Tomato; rysuje pasek tylko przy lewej kra­wę­dzi. Mar­gi­nes ze­wnętrz­ny ma jedną war­tość spe­cjal­ną: margin: auto każe prze­glą­dar­ce wy­li­czyć mar­gi­ne­sy boczne tak, żeby blok o usta­lo­nej sze­ro­ko­ści stanął po­środ­ku ele­men­tu nad­rzęd­ne­go. Bez po­da­nej sze­ro­ko­ści nie ma czego cen­tro­wać, bo blok i tak zaj­mu­je całą do­stęp­ną prze­strzeń.

Skróty z jedną, dwiema, trzema i czte­re­ma war­to­ścia­mi

Skrót to zapis, w którym jedna wła­ści­wość usta­wia wszyst­kie cztery kra­wę­dzie naraz. Liczba po­da­nych war­to­ści de­cy­du­je o tym, którą kra­wędź opi­su­je która liczba, a ko­lej­ność jest zawsze zgodna z ruchem wska­zó­wek zegara od góry: góra, prawo, dół, lewo.
Skrót
Ko­lej­ność war­to­ści
Znaczy
padding: 20px;
wszyst­kie kra­wę­dzie
20 px z każdej strony
margin: 10px 20px;
pion, poziom
10 px góra i dół, 20 px lewo i prawo
padding: 10px 20px 30px;
góra, poziom, dół
10 px góra, 20 px boki, 30 px dół
padding: 50px 20px 40px 30px;
góra, prawo, dół, lewo
50 px góra, 20 px prawo, 40 px dół, 30 px lewo
Cztery liczby to zapis, na którym naj­czę­ściej wy­kła­da się py­ta­nie pi­sem­ne. Po­le­ce­nie „mar­gi­nes górny 50 px, dolny 40 px, prawy 20 px i lewy 30 px" wy­mie­nia kra­wę­dzie w innej ko­lej­no­ści niż CSS, więc trzeba je naj­pierw ułożyć według zegara, a do­pie­ro potem za­pi­sać padding: 50px 20px 40px 30px;. War­to­ści roz­dzie­la się spa­cja­mi, nigdy prze­cin­ka­mi. Gdy w grę wcho­dzi jedna kra­wędź, pro­ściej i bez­piecz­niej użyć pełnej nazwy: margin-top, margin-right, margin-bottom, margin-left oraz te same cztery dla padding.

Li­cze­nie sze­ro­ko­ści cał­ko­wi­tej

Sze­ro­kość cał­ko­wi­ta to miej­sce, jakie ele­ment zaj­mu­je w po­zio­mie razem ze wszyst­ki­mi war­stwa­mi. Do­myśl­nie width opi­su­je samą treść, więc pu­deł­ko na stro­nie jest szer­sze niż podana liczba: sze­ro­kość cał­ko­wi­ta to width po­więk­szo­na o dwa mar­gi­ne­sy we­wnętrz­ne i dwie linie ob­ra­mo­wa­nia. Mar­gi­ne­sy ze­wnętrz­ne do­kła­da­ją jesz­cze dwa razy margin, ale to już od­le­głość od są­sia­dów, a nie roz­miar samego pro­sto­ką­ta z tłem. Ra­chu­nek pro­wa­dzi się w trzech kro­kach. Wypisz width, padding, border i margin dla jednej strony. Pomnóż trzy ostat­nie przez dwa, bo każda war­stwa wy­stę­pu­je po lewej i po prawej. Dodaj albo odej­mij, za­leż­nie od tego, o co pyta po­le­ce­nie.
.panel { width: 500px; padding: 30px 10px; border: none; }
Skrót padding: 30px 10px daje 30 px u góry i na dole oraz 10 px po bokach, a ob­ra­mo­wa­nia nie ma. W po­zio­mie liczy się tylko druga liczba, więc sze­ro­kość cał­ko­wi­ta wynosi 500 plus 10 plus 10, czyli 520 px. Wy­so­kość rośnie o 30 px z góry i 30 px z dołu.
Drugi kształt py­ta­nia jest od­wrot­ny: arkusz podaje sze­ro­kość CAŁEGO bloku i pyta, ile zo­sta­je na treść. Wtedy się odej­mu­je.
.strona { box-sizing: border-box; width: 640px; padding: 20px; border: 2px solid #222222; }
Od 640 px od­cho­dzą dwa mar­gi­ne­sy we­wnętrz­ne po 20 px i dwie linie ob­ra­mo­wa­nia po 2 px: 640 minus 40 minus 4 daje 596 px na treść. Liczby w ar­ku­szu bywają inne i od­po­wiedź wy­cho­dzi wtedy na przy­kład 560 px, ale metoda zo­sta­je ta sama: naj­pierw podwój wy­peł­nie­nie i ob­ra­mo­wa­nie, potem odej­mij od sze­ro­ko­ści ze­wnętrz­nej. Gotowy ra­chu­nek dla wła­snych liczb po­ka­zu­je na­rzę­dzie model pu­deł­ko­wy CSS.

box-sizing: con­tent-box kontra border-box

box-sizing (sposób li­cze­nia roz­mia­ru) to wła­ści­wość, która roz­strzy­ga, co do­kład­nie opi­su­je liczba podana w width i height. Ma dwie war­to­ści i to od nich zależy, czy w za­da­niu do­da­jesz, czy odej­mu­jesz.
War­tość
Co obej­mu­je width
Blok z width: 200px, padding: 20px, border: 4px
content-box
samą treść, war­tość do­myśl­na
zaj­mu­je 248 px, treść ma 200 px
border-box
treść razem z wy­peł­nie­niem i ob­ra­mo­wa­niem
zaj­mu­je 200 px, treść ma 152 px
Do­myśl­ne content-box psuje układy bu­do­wa­ne na pro­cen­tach. Panel boczny z width: 30% i blok główny z width: 70% wy­peł­nia­ją do­kład­nie sto pro­cent sze­ro­ko­ści ele­men­tu nad­rzęd­ne­go, ale wy­star­czy dodać im po 20 px wy­peł­nie­nia, żeby suma prze­kro­czy­ła do­stęp­ne miej­sce i drugi blok zje­chał pod pierw­szy. Przy border-box obie liczby zo­sta­ją sze­ro­ko­ścia­mi cał­ko­wi­ty­mi, wy­peł­nie­nie zjada miej­sce od środka i ko­lum­ny nadal miesz­czą się obok siebie. Dla­te­go arkusz stylów za­czy­na się zwykle od jednej reguły z se­lek­to­rem uni­wer­sal­nym, która włącza ten tryb dla wszyst­kich ele­men­tów:
* { box-sizing: border-box; }

Za­okrą­gle­nia, cienie i łą­cze­nie mar­gi­ne­sów

border-radius (za­okrą­gle­nie na­roż­ni­ków) za­okrą­gla rogi pu­deł­ka razem z ob­ra­mo­wa­niem i tłem. Arkusz CKE pisze wprost „za­okrą­gle­nie na­roż­ni­ków 5 px", co za­pi­su­je się jako border-radius: 5px. War­tość w pro­cen­tach liczy się od roz­mia­ru ele­men­tu, więc border-radius: 50% robi z kwa­dra­tu koło. box-shadow do­kła­da cień pod pu­deł­kiem i nie zaj­mu­je miej­sca w ukła­dzie, a jego skład­nię opi­su­je osobna lekcja o tłach, cie­niach i ani­ma­cjach. Gdy treść nie mieści się w pu­deł­ku o usta­lo­nej wy­so­ko­ści, o tym, czy ma wy­sta­wać, zostać przy­cię­ta czy dostać pasek prze­wi­ja­nia, de­cy­du­je overflow z lekcji o ukła­dzie strony.
Łą­cze­nie mar­gi­ne­sów (margin collapsing, skła­da­nie mar­gi­ne­sów) to reguła, według której dwa sty­ka­ją­ce się mar­gi­ne­sy pio­no­we nie sumują się: zo­sta­je z nich więk­szy. Akapit z margin-bottom: 30px sto­ją­cy nad aka­pi­tem z margin-top: 20px daje odstęp 30 px, a nie 50 px, i to samo dzieje się między mar­gi­ne­sem ele­men­tu nad­rzęd­ne­go a mar­gi­ne­sem pierw­sze­go dziec­ka. Mar­gi­ne­sy po­zio­me nie łączą się nigdy, więc dwa bloki obok siebie dzieli zawsze suma ich mar­gi­ne­sów. Skła­da­nie znika, gdy między mar­gi­ne­sa­mi stanie ob­ra­mo­wa­nie albo wy­peł­nie­nie. Mar­gi­ne­sy ujemne, na przy­kład margin-top: -10px, wcią­ga­ją ele­ment na są­sia­da i sto­su­je się je rzadko, do drob­nych korekt po­ło­że­nia.

Pu­deł­ka strony sklepu

Panele sklepu kom­pu­te­ro­we­go do­sta­ją wy­peł­nie­nie, za­okrą­glo­ne rogi i odstęp od kra­wę­dzi, a każdy pro­dukt w bloku głów­nym własną ramkę. Se­lek­to­ry od­wo­łu­ją się do znacz­ni­ków sekcji ze strony zbu­do­wa­nej w lekcji o znacz­ni­kach sekcji.
aside, main { padding: 15px; margin: 10px; border: none; border-radius: 5px; background-color: #ffffff; } article { padding: 10px; margin-bottom: 10px; border: 2px solid Tomato; border-radius: 5px; }
Panel boczny i blok główny mają białe tło się­ga­ją­ce pod całe wy­peł­nie­nie, nie mają ob­ra­mo­wa­nia i od­su­wa­ją się o 10 px od kra­wę­dzi oraz od siebie na­wza­jem. Każdy ar­ty­kuł z pro­duk­tem otacza ramka w ko­lo­rze ak­cen­tu, a margin-bottom zo­sta­wia odstęp do na­stęp­ne­go pro­duk­tu. Po­nie­waż są­sia­du­ją­ce mar­gi­ne­sy pio­no­we ar­ty­ku­łów się łączą, odstęp między dwoma pro­duk­ta­mi wynosi 10 px, a nie 20 px.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o model pu­deł­ko­wy mają kilka sta­łych kształ­tów. Pierw­szy to nazwa: wła­ści­wość de­fi­niu­ją­ca mar­gi­ne­sy we­wnętrz­ne to padding, a nie margin, width ani height, i tak samo „we­wnętrz­ny górny mar­gi­nes, czyli odstęp między ele­men­tem a ota­cza­ją­cym go ob­ra­mo­wa­niem" to padding-top, nie border-top ani outline-top. Drugi kształt to ra­chu­nek: blok z width: 500px i padding: 30px 10px ma cał­ko­wi­tą sze­ro­kość 520 px, a de­fi­ni­cja z podaną sze­ro­ko­ścią strony i mar­gi­ne­sa­mi we­wnętrz­ny­mi każe odjąć, żeby po­wie­dzieć, ile miej­sca po­zo­sta­wio­no na treść. Trzeci to opis stylu sło­wa­mi: „ob­ra­mo­wa­nie o sze­ro­ko­ści 2 px oraz mar­gi­ne­sy we­wnątrz tego ob­ra­mo­wa­nia" znaczy border: 2px razem z padding, a „mar­gi­ne­sy na ze­wnątrz tego ob­ra­mo­wa­nia" zna­czy­ło­by margin. Czwar­ty to ry­su­nek: ob­ra­zek z tłem Teal, krop­ko­wa­ną ramką gru­bo­ści 4 px, wy­peł­nie­niem 50 px i mar­gi­ne­sem 20 px od­po­wia­da za­pi­so­wi border: 4px dotted Teal; razem z padding: 50px; i margin: 20px;, a od od­po­wie­dzi z solid albo dashed od­róż­nia go sam wygląd linii. Piąty to kolor wi­docz­ny poza ob­ra­mo­wa­niem, któ­re­go nie daje ani border, ani margin: rysuje go outline. Wraca też margin: auto z od­po­wie­dzią „mar­gi­ne­sy wy­li­cza­ne przez prze­glą­dar­kę tak, aby ele­ment został wy­środ­ko­wa­ny w po­zio­mie" oraz skrót z czte­re­ma war­to­ścia­mi, gdzie prawy mar­gi­nes ze­wnętrz­ny 200 px daje tylko zapis margin: 100px 200px 150px 80px.
Pu­łap­ka: padding po­więk­sza sam ele­ment razem z jego tłem, margin ni­cze­go nie po­więk­sza, tylko odsuwa ele­ment od są­sia­dów.
W za­da­niu prak­tycz­nym pro­jek­tu­je się wygląd strony z listy po­le­ceń i każde z nich ma do­kład­ny od­po­wied­nik w kodzie. „Brak ob­ra­mo­wa­nia" to border: none, „za­okrą­gle­nie na­roż­ni­ków 5 px" to border-radius: 5px, „mar­gi­ne­sy ze­wnętrz­ne 10 px" to margin: 10px, „mar­gi­ne­sy we­wnętrz­ne 15 px" to padding: 15px, a „mar­gi­ne­sy wy­li­cza­ne au­to­ma­tycz­nie" to margin: auto dla bloku z usta­lo­ną sze­ro­ko­ścią. Style muszą trafić do ze­wnętrz­ne­go pliku do­łą­czo­ne­go znacz­ni­kiem <link>, bo zapis w atry­bu­cie style kosz­tu­je punkt. Gdy arkusz podaje sze­ro­ko­ści paneli w pro­cen­tach, a przy tym mar­gi­ne­sy we­wnętrz­ne, dopisz na po­cząt­ku ar­ku­sza regułę z box-sizing: border-box: bez niej suma 30 pro­cent i 70 pro­cent prze­kro­czy sze­ro­kość okna i panele roz­ja­dą się na dwa wier­sze, co widać od razu po otwar­ciu strony w prze­glą­dar­ce.

Ściąga

Zapis
Znaczy
width, height
sze­ro­kość i wy­so­kość samej treści
padding: 15px;
mar­gi­nes we­wnętrz­ny, odstęp od treści do ob­ra­mo­wa­nia
padding: 50px 20px 40px 30px;
góra, prawo, dół, lewo, zgod­nie z ruchem wska­zó­wek zegara
border: 4px dotted Teal;
sze­ro­kość, styl i kolor ob­ra­mo­wa­nia w jednym za­pi­sie
border-style
solid, dashed, dotted, double, none
border: none;
brak ob­ra­mo­wa­nia
border-radius: 5px;
za­okrą­gle­nie na­roż­ni­ków 5 px
margin: 10px;
mar­gi­nes ze­wnętrz­ny, odstęp od są­sia­dów
margin: auto;
mar­gi­ne­sy wy­li­cza­ne au­to­ma­tycz­nie, blok wy­środ­ko­wa­ny w po­zio­mie
outline
linia poza ob­ra­mo­wa­niem, nie zaj­mu­je miej­sca w pu­deł­ku
box-sizing: content-box;
do­myśl­ne, width to sama treść
box-sizing: border-box;
width obej­mu­je treść, wy­peł­nie­nie i ob­ra­mo­wa­nie
sze­ro­kość cał­ko­wi­ta
width plus dwa razy padding plus dwa razy border
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Kolory, jednostki i tekst w CSS: hex, rgb, hsl, px, em, rem, font i textnastępna: Układ strony w CSS: display, position, float, z-index, overflowspis działu: CSS

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.