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.
Über mich
Eine Antwort