• Thema

  • Technologie

Web-Einmaleins: Box-Sizing!

Beitrag speichern
Please login

Noch kein Konto? Registrieren

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

Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
0
what?
0
meh.
0
hahaha
0
Diskussion

Eine Antwort

Schreibe einen Kommentar

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

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.