Code Ansicht

Update Tutorials - Tricks & Tipps

Thema: PDF-Weiterleitungen mit PHP

Zum Tutorial

Box-Modell

Wilkommen zum Tutorial!

Welche Vorraussetzungen ihr braucht um dieses Tutorial zu verstehen?

Ihr solltet HTML5 kennen und benutzen können. CSS Kenntnisse wären auch von Vorteil.

 

So, nicht abgeschreckt? Dann auf ins Tutorial!

 

Grundlagen

Nur zum sicherstellen, dass alle wissen wovon ich rede: Ihr habt Padding (Innenabstand), Margin (Aussenabstand), Border (Umrandung) und die Weite des Contents (des Textes bzw. Bildes).

Denkt einmal kurz über folgende Fragestellung nach und rechnet für euch selber:
Ich habe ein Div mit

width: 200px;
height: 300px;
padding: 10px;
margin: 20px;
border: 1px solid black;

Wie hoch und breit ist mein Div insgesamt?

 

Lösung:
Breite: 200px + 20px + 40px + 2px = 262px
Höhe: 300px + 20px + 40px + 2px = 362px

Das ist also das Standard-Box-Modell, welches ohne weitere Anweisungen für eure Boxen gilt. Alle Abstände und der Rahmen werden hinzu addiert. Das macht es nicht immer leicht alles auf gleiche Größe zu bringen. Zum Glück gibt es eine Alternative:

Das Border-Box-Modell.
Bei diesem Modell werden alle Abstände und Rahmen mit eingerechnet.

Rechnung:
Breite: 200px - 20px - 40px - 2px = 138px
Höhe: 300px - 20px - 40px - 2px = 238px

Ihr seht, alles wird vom Content abgezogen und die Box ist immer so breit oder hoch wie ihr es angegeben habt. Rechnen erübrigt sich :)

 

Wie kann man das Box-Modell ändern?

Das ist recht einfach. Ihr gebt einfach dem Container oder dem Element selber die Eigenschaft "box-sizing: border-box". Ich zum Beispiel benutze es für die gesamte Website:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Weil box-sizing ziemlich neu ist, sollte man die vendor-prefixes -webkit- und -moz- benützen, wie ich es in diesem Beispiel getan habe.

 

Und Internet Explorer-Unterstützung?

Border-Box wird erst ab IE 8 unterstützt, aber wer dafür noch produziert...tut mir ehrlich leid :(