box-sizing
.pudelko {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 16px;
border: 4px solid;
margin: 20px;
}
margin
20px
wolne miejsce na zewnątrz, odsuwa sąsiadów
border
4px
linia dookoła wypełnienia
padding
16px
wolne miejsce między ramką a treścią
treść
200 x 100px
tu wchodzi tekst i obrazki
Warstwy czytasz od środka: treść, wypełnienie, ramka. Margines leży już poza pudełkiem, dlatego tło pudełka kończy się na zewnętrznej krawędzi ramki.
[ ROZLICZENIE SZEROKOŚCI ]
krok 1: width: 200px opisuje samą treść
krok 2: treść + wypełnienie: 200 + 2 x 16 = 232
krok 3: + ramka: 232 + 2 x 4 = 240
szerokość na ekranie: 240px
wysokość na ekranie: 100 + 2 x 16 + 2 x 4 = 140px
miejsce w układzie: 240 + 2 x 20 = 280px
[ TA SAMA DEKLARACJA, DWA WYNIKI ]
content-box
width to sama treść, więc pudełko rośnie: 200 + 40 = 240px na ekranie
border-box
width to całe pudełko, więc treść się kurczy: 200 - 40 = 160px na treść
Wypełnienie i ramkę liczysz dwa razy, bo są z lewej i z prawej: 2 x 16 + 2 x 4 = 40px. Bez deklaracji box-sizing przeglądarka liczy jak content-box.