#1 Vlastnost box-sizing
Pomocí vlastnosti box-sizing lze změnit chování šířky a výšky prvku, konkrétně změnit, jak se oba rozměry počítají.
V základním nastavení CSS má prvek výšku a/nebo šířku, po které následují padding a border, podle modelu box, které se ale do celkové výšky prvku nepočítají. Skutečná výška (nebo šířka) prvku je tak rovna výšce (nebo šířce) + padding + border. Vlastnost box-sizing dokáže toto chování změnit, aby se do definované výšky nebo šířky počítal i padding a border.
#2 Rozdíly
Bez box-sizing
Prvek, který nemá definovanou vlastnost box-sizing se bude chovat podle následujícího CSS takto:
#box {
width: 200px;
height: 100px;
padding: 25px;
border: 5px solid blue;
}
Prvek s identifikátorem #box má definovanou výšku i šířku, vnitřní odsazení (padding) a ohraničení (border). Skutečná šířka prvku je tak 200 px (šířka) + 50 px (odsazení na obou stranách) + 10 px (ohraničení na obou stranách), tedy 260 px. Obdobně to je také s výškou, kdy skutečná výška je 160 px.
S vlastností box-sizing
Prvek s definovanou vlastností box-sizing se bude chovat následovně.
#box {
width: 200px;
height: 100px;
padding: 25px;
border: 5px solid blue;
box-sizing: border-box;
}
Tentokrát, konečná šířka prvku bude 200 px a výška 100 px, i přes to, že má prvek kromě box-sizing shodné vlastnosti. Právě tato vlastnost způsobuje, že všechny aditivní zvětšní prvku (vlastnosti padding a border) budou zahrnuty do celkové výška (či šířky).
Vlastnost box-sizing zachovává všechny velikosti až na výšku či šířku, kterou na úkor vlastností padding či border zmenšuje. Prvek #box s touto vlastností má 50px odsazení, 10px okraj, ale pouze 140px šířku, i přes to, že ji má definovanou na 200 px; obdobně s výškou, která bude nyní pouze 40 px.