Web-Einmaleins: Box-Sizing!

Wer sich an ein responsive Design wagt, sollte wissen: Nicht alles wird in Prozent angegeben!Ein perfektes Beispiel dafür, sind die Abstände bei nebeneinander stehenden Boxen. Angenommen wir haben ein Inhaltslayout welches vier Boxen nebeneinander darstellen soll. Oftmals sehe ich Layouts, welche auch den Abstand in Prozent angeben. Dies sieht dann in etwa so aus, dass die Boxen 20% breit sind und jeweils 4% Abstand haben.

Allerdings gibt es eine einfachere Methode, solche Layouts darzustellen. Das Stichwort: box-sizing: border-box
Wenn wir die Elemente in unserem Layout mit diesem Wert erweitern, können wir die Abstände in Paddings angeben und die Volle Breite der Box wird anschliessend anhand der Abstände berechnet, Fantastisch!

Also wäre eine Box, welche mit 200px Breite und 20px Abstand (Padding) definiert wird schlussendlich immernoch 200px Breit und nicht 240px.

Dies funktioniert ebenso bei einer Angabe der Breite in Prozent.

 


Keine Beiträge verpassen?


War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 1 )
Passende Themen
Kommentare (1)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.