box-sizing

div 1
Breite 300px
Höhe 100px
div 2
Breite 300px
Höhe 100px

Warum ist der 2. div trotzdem höher und breiter?




Breite + Innenabstand + Rahmen (width + padding + border)


Höhe + Innenabstand + Rahmen (height + padding + border)

Wie setzt sich die tatsächliche Höhe/ Breite zusammen?


Lösung des Problems mit box-sizing: border-box;
div 1
Breite 300px
Höhe 100px
div 3
Breite 300px
Höhe 100px