CSS · lekcja 05

Model pudełkowy: z czego składa się pudełko

Każdy element strony to prostokątne pudełko - dziś sprawdzimy, z czego się składa

Cztery warstwy pudełka: content, padding, border, margin
box-sizing: content-box a box-sizing: border-box
Sprawdzanie pudełka w narzędziach deweloperskich (F12)
Ćwiczenie: pudełko w Waszym pliku style.css

Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

Jakie trzy rodziny czcionek poznaliście na poprzedniej lekcji?
Po co stosuje się stos czcionek zapasowych zamiast jednej czcionki?
Którą właściwością zdejmiecie domyślne podkreślenie linku?

Część 1 · cztery warstwy pudełka

Content, padding, border, margin

Każdy element HTML to prostokątne pudełko z czterech warstw, jedna wewnątrz drugiej: content (treść), padding (odstęp wewnętrzny), border (obramowanie), margin (odstęp zewnętrzny). Porównanie: pudełko na prezent - prezent to content, bibułka to padding, karton to border, wolne miejsce do sąsiada na półce to margin.

MDN: „The padding sits around the content as white space... The border box wraps the content and any padding... The margin is the outermost layer... whitespace between this box and other elements” · przykład liczbowy MDN: „The actual space taken up by the box will be 410px wide (350 + 25 + 25 + 5 + 5)” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Box_model

Część 2 · box-sizing: content-box

Domyślnie: width dotyczy tylko treści

Domyślnie w CSS obowiązuje standardowy model pudełka: width i height ustawiają rozmiar samej treści (content). padding i border dokładają się do tego rozmiaru, więc widoczne pudełko jest większe niż zadeklarowana szerokość. To wartość domyślna box-sizing - nie trzeba jej wpisywać.

.box {
  width: 350px;
  padding: 25px;
  border: 5px solid black;
}
/* faktyczna szerokość: 350 + 25+25 + 5+5 = 410px */

MDN: „In the standard box model, if you set width and height property values on a box, these values define the width and height of the content box. Any padding and borders are then added to those dimensions to get the total size taken up by the box” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Box_model

Część 3 · box-sizing: border-box

Alternatywa: width to cała widoczna szerokość

Właściwość box-sizing: border-box włącza alternatywny model: width ustawia od razu całą widoczną szerokość pudełka (z paddingiem i borderem w środku), a treść kurczy się, żeby się zmieścić.

Ciekawostka z MDN: box-sizing: border-box nie jest niczym nowym dla przeglądarki. Elementy table, select, button oraz pola input typu radio, checkbox, reset i submit mają ten tryb ustawiony domyślnie, jeszcze zanim ktokolwiek wpisze tę regułę ręcznie.

MDN: „To turn on the alternative model for an element, set box-sizing: border-box on it... In the alternative box model, any width is the width of the visible box on the page. The content area width is that width minus the width for the padding and border” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Box_model · ciekawostka: developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Część 4 · sprawdzanie w przeglądarce

Nie liczcie w pamięci - sprawdźcie w F12

Narzędzia deweloperskie przeglądarki (klawisz F12) pokazują realny box model wybranego elementu: cztery warstwy z dokładnymi liczbami w pikselach, bez liczenia na kartce.

MDN: „Your browser developer tools can make understanding the box model far easier - they can show you the size of the element plus its margin, padding, and border” · developer.mozilla.org/docs/Learn_web_development/Core/Styling_basics/Box_model

CSS · egzamin

Tak pytają na egzaminie

1. background-color: red; color: blue; margin: 40px; W języku CSS zdefiniowano formatowanie paragrafu, które przypisze mu następujące cechy:

tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px
tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px
tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px
tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

2. div { border: solid 2px blue; margin: 20px; } W języku CSS zdefiniowano styl. Sformatowana stylem sekcja będzie zawierała obramowanie o szerokości

2 px oraz marginesy wewnątrz tego obramowania.
20 px oraz marginesy wewnątrz tego obramowania.
2 px oraz marginesy na zewnątrz tego obramowania.
20 px oraz marginesy na zewnątrz tego obramowania.

CKE, E.14, styczeń 2020, zadanie 7 · CKE, E.14, czerwiec 2017, zadanie 7

Ćwiczenie · przy komputerze · 20 minut

Ćwiczenie: pudełko w Waszym CSS

W style.css dodaj głównemu kontenerowi padding (np. 20px), border (np. 2px solid #333333) i margin (np. 30px).
Na kartce policz całkowitą szerokość pudełka: treść + padding z obu stron + border z obu stron (bez marginesu).
Otwórz F12 → Elements/Inspektor, kliknij kontener, znajdź panel Box model i sprawdź wyliczenie.
Zapisz plik, wciśnij F5 i sprawdź stronę w przeglądarce.

Ma się pojawić: główny kontener strony z widocznym odstępem wewnętrznym, obramowaniem i odstępem od innych elementów; Wasze wyliczenie na kartce zgodne z liczbami w panelu Box model.

Pytania kontrolne

Trzy pytania na koniec

Wymieńcie cztery warstwy pudełka w kolejności od treści na zewnątrz.
Czym różni się padding od margin?
Co zmienia box-sizing: border-box w porównaniu z domyślnym zachowaniem?

To tyle na dziś: temat CSS - model pudełkowy otwarty, na następnej lekcji szerokość, zaokrąglenia i cień.

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
Domyślny `box-sizing: content-box`	Prawie każdy reset CSS (np. Normalize.css) globalnie ustawia `* { box-sizing: border-box; }`, bo tak łatwiej liczyć szerokości	zastępowane
Liczenie szerokości na kartce	Deweloperzy sprawdzają box model w narzędziach deweloperskich (F12) zamiast liczyć ręcznie	narzędzia
Dowolna wartość `margin`/`padding`	Systemy projektowe (np. Bootstrap, Tailwind) narzucają spójną skalę odstępów (np. co 4 lub 8 px) zamiast przypadkowych liczb	rozbudowane
Jedno pudełko na przykładzie	Cały układ strony to dziesiątki zagnieżdżonych pudełek, a marginesy sąsiadów potrafią się ze sobą zlewać (collapsing margins)	rozbudowane