box-sizing kontroluje co właściwie mierzą właściwości width i height. Domyślna wartość (content-box) mierzy tylko zawartość; border-box sprawia, że obejmują padding i border.
box-sizing kontroluje co właściwie mierzą właściwości width i height. Domyślna wartość (content-box) mierzy tylko zawartość; border-box sprawia, że obejmują padding i border.
.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
Z content-box, padding i border są dodawane na wierzch wartości width, więc element okazuje się szerszy niż ustawiona liczba. To psuje layout: pole width: 50% z paddingiem przepełni swoje 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Z border-box, width to końcowa renderowana szerokość — padding i border są odejmowane od wewnątrz. Liczba którą ustawisz to rozmiar który otrzymasz, co jest znacznie bardziej intuicyjne.
*, *::before, *::after {
box-sizing: border-box;
}
Prawie każdy nowoczesny arkusz stylów, framework i reset stosuje to globalnie. Powoduje to, że wymiarowanie jest przewidywalne: width: 50% + padding pozostaje dokładnie 50% szeroki, dwie width: 50% pola siedzą obok siebie bez przepełnienia, itd.
border-box eliminuje jedno z najczęstszych źródeł problemów z matematiką layout'u — konieczność umysłowego dodawania paddingu i bordera do każdej szerokości.
Ustawienie go globalnie jest uważane za najlepszą praktykę domyślną, ponieważ "szerokość którą ustaw to szerokość którą otrzymam" to sposób w jaki naturalnie oczekujesz, że wymiarowanie powinno działać.