Rund um CSS

Boxmodell

Der Einfluss von padding und margin auf die Größe

Alle Bestandteile einer Box (für mich sind das immer Rahmen, aber ok) werden addiert, siehe Abbildung.
Die Gesamtbreite errechnet sich aus:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Die Gesamthöhe einer Box wird ebenso errechnet aus:

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Im Formular können die Werte variiert und übertragen werden.

             
margin:      
border:      
padding:     
           
contain:   
Formular: