Zum Inhalt

Inhaltsverzeichnis • Anhang • Anhang: CSS • Anhang: CSS-Boxmodell
⇦ Anhang: CSS-Eigenschaften / Anhang: CSS-Einheiten und Farben ⇨
25.07.2014 09:10:41

Anhang: CSS-Boxmodell

Referenz: Box-Modell im selfHTML Wiki und in css4you.

Die Eigenschaften left (links), right (rechts), top (oben) und bottom (unten) sowie alternativ width (Breite) und height (Höhe) legen die Position eines Blockelements fest. Und zwar immer relativ zum übergeordneten Blockelement. Voraussetzung dafür ist die Angabe der Positionsart mit position: absolute;, position: relative; oder position: fixed;.

Normales Box-Modell

Box-Modell
          top          
          margin          
          border          
          pading          
        width    ↤        
left      heightEin beliebiger
Inhalt der Box!
        right
                    
                      
                      
                      
          bottom          

100% des Anzeigefenster oder des übergeordneten Blockelements entsprechen:

Anpassen des Modells

Sie können das Box-Modell mit der Eigenschaft box-sizing [w,c] anpassen:

content-box
Normales Box-Modell (Standardwert, W3C-Standard)
padding-box
Die Box bleibt auch mit Innenabstand gleich groß, für den eigentlichen Inhalt steht dann weniger Platz zur Verfügung.
100% = left + margin(-left) + border-size + width + border-size + margin(-right) + right
border-box
Eine Box mit Rahmen und Innenabstand bleibt insgesamt genauso hoch und breit, wie über das CSS definiert
100% = left + margin(-left) + width + margin(-right) + right
margin-box
Eine Box mit Außernabstand, Rahmen und Innenabstand bleibt insgesamt genauso hoch und breit, wie über das CSS definiert
100% = left + width + right
⇦ Anhang: CSS-Eigenschaften / Anhang: CSS-Einheiten und Farben ⇨
Nach oben