box-sizing: content-box i border-box
Poznają Państwo, jak box-sizing zmienia sposób uwzględniania paddingu i obramowania w obliczeniach szerokości i wysokości.
box-sizing: content-box i border-box to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Problem z box-sizing
Domyślnie CSS ustawia width tylko dla obszaru zawartości. Dodanie dopełnienia lub obramowania zwiększa rzeczywisty renderowany rozmiar elementu, co może prowadzić do nieporozumień i błędów.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (domyślnie)
box-sizing: content-box jest wartością domyślną. width i height dotyczą wyłącznie treści. Padding i border są doliczane dodatkowo, przez co element staje się większy niż ustawiony rozmiar.
border-box
W przypadku box-sizing: border-box wartości width i height obejmują content + padding + border. Element zachowuje dokładnie zadeklarowany rozmiar niezależnie od paddingu i borderu.
<div class="box">Exactly 200px rendered width</div>
Uniwersalny reset border-box
Należy globalnie zastosować border-box za pomocą powszechnie zalecanego resetu:
<div class="demo-box">Width stays exactly 200px</div>
Dlaczego inherit zamiast *
Alternatywny wzorzec pozwala komponentom zastąpić box-sizing, gdy jest to potrzebne:
<div class="demo-box">Inherited border-box sizing</div>
Procentowa szerokość + padding
Najważniejsza praktyczna korzyść z border-box dotyczy szerokości wyrażanych procentowo. Element z width: 50% i paddingiem 20px zachowuje dokładnie 50% szerokości elementu nadrzędnego, bez powodowania przepełnienia.
<div class="col">50% wide column with padding, no overflow</div>
border-box nie obejmuje margin
Nawet w przypadku border-box margin nie jest uwzględniany w zadeklarowanej szerokości. Marginesy zawsze dodają miejsce na zewnątrz elementu, poza jego ustalonymi wymiarami.
Historia: dlaczego content-box jest wartością domyślną
Historycznie przeglądarki różniły się sposobem obsługi modelu pudełkowego. Standard W3C określał content-box, natomiast IE używał border-box. Współczesny CSS domyślnie stosuje content-box ze względu na zgodność z W3C, ale praktycznie wszystkie projekty zastępują go wartością border-box.
Sprawdzanie modelu pudełkowego w DevTools
W Chrome DevTools panel Elements wyświetla diagram modelu pudełkowego z dokładnymi wymiarami content, padding, border i margin. To najszybszy sposób na zdiagnozowanie problemów z rozmiarami.
Grid i Flexbox wewnętrznie używają border-box
CSS Grid i Flexbox zawsze określają rozmiary torów i elementów zgodnie z zasadami border-box, niezależnie od własnego ustawienia box-sizing elementu. Dzięki temu obliczenia rozmiarów są przewidywalne.
min/max z border-box
Właściwości min-width, max-width, min-height i max-height działają tak samo jak width — gdy aktywne jest border-box, obejmują padding i border.
Szybkie sprawdzenie
W przypadku box-sizing: border-box element o deklaracjach width: 300px; padding: 30px; ma obszar treści o szerokości:
Podsumowanie
box-sizing: border-box uwzględnia padding i border w zadeklarowanej szerokości, zapobiegając nieoczekiwanemu zwiększeniu rozmiaru. Należy zastosować je globalnie za pomocą *, *::before, *::after { box-sizing: border-box }. Margin nigdy nie jest uwzględniany w żadnym z modeli pudełkowych.
Często zadawane pytania
Czy lekcja „box-sizing: content-box i border-box” jest bezpłatna?
Tak — pełny tekst „box-sizing: content-box i border-box” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „box-sizing: content-box i border-box”?
Poznają Państwo, jak box-sizing zmienia sposób uwzględniania paddingu i obramowania w obliczeniach szerokości i wysokości. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „box-sizing: content-box i border-box”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Poznawanie width, height, margin i padding
- Style, szerokość i kolor obramowania
- box-sizing: content-box i border-box
- Outline i box-shadow