Boxmodell

Im Zusammenhang mit den Abständen sollte man sich nochmal die Unterscheidung zwischen Block und Inline Elementen vor Augen führen. Block Elemente können eine Breite und Höhe zugewiesen bekommen und erzeugen einen Zeilenumbruch. Inline Elementen kann man keine Breite und Höhe zuweisen. Sie erzeugen keine neue Zeile. Es gibt außerdem noch Inline Block Element wie das img- Element denen man zwar eine Breite und Höhe zuweisen kann, die jedoch keine neue Zeile erzeugen.

Abstände mit padding und margin

Innenabstand padding

Der Abstand des Inhalts zu Rahmen wird padding = Polsterung genannt. Er macht Sinn bei Blockelementen, also Elementen die einen eigenen Absatz erzeugen. Außerdem macht es Sinn, wenn man Rahmen oder Hintergründe definiert. Auch in Tabellen sind ist die Eigenschaft padding sinnvoll, besonders dann wenn die Tabelle Linien hat. Das padding liegt innerhalb der Box in dem Sinne, dass es Hintergrundfarbe und Hintergrundbild übernimmt. Die Breite und Höhe des Paddings liegen nicht innerhalb der mit width und height definierten Eigenschaften.

Beispiel padding

padding
Eigenschaft Wert Bedeutung
Standardwert 0px
Vererbbar nein
Anwendbar Alle Elemente
padding Zahlenangabe Maßeinheit oder Prozent

Separate Werte

td {padding-top: 30px; padding-left: 10px;}

Separate Werte

padding-

top oben
right rechts
bottom unten
left links

Mehren numerische Angaben zu den einzelnen Seiten

Wie auch in anderen Eigenschaften kann man mehrere Werte mit Leerzeichen getrennt aufführen. Die Regelung für die Seiten ist die gleiche wie beispielsweise für border.

td {padding: 30px 10px 5px;}

Mehrere Werte für padding
Anzahl Reihenfolge Bedeutung Beispiel
1 Wert Wert 1 alle 4 Seiten td {padding: 2px;}
2 Werte Wert 1 oben & unten td {padding: 2px 1px;}
Wert 2 links & rechts
3 Werte Wert 1 oben td {padding: 2px 1px 3px;}
Wert 2 links & rechts
Wert 3 unten
4 Werte Wert 1 oben td {padding: 2px 1px 2px 4px;}
Wert 2 rechts
Wert 3 unten
Wert 4 links

Außenabstand mit margin

Der Außenabstand ist der Abstand zwischen dem Element und dem Elternelement oder Nachbarelement. Sinnvoll sind diese Außenabstände für alle Elemente die einen eigenen Absatz erzeugen, die Blockelemente. Auch dem Body Element oder Table kann man die margin Eigenschaft zuweisen.

margin ist die Kurzschreibweise. Auch hier gibt es genau wie bei padding, mehrere Eigenschaften für die einzelnen Seiten margin-top margin-left margin-bottom margin-right. Nutzt man die Kurzschreibweise margin, kann man einen oder mehrere Werte genauso zuweisen, wie bei padding.

Beispiel margin

margin
Eigenschaft Wert Bedeutung
Standardwert rechts, links 0px / oben, unten Browserabhängig, ca 10px 20px
Vererbbar nein
Anwendbar Alle Elemente / Achtung Bei Inline-Elementen sind margin-top und margin-bottom wirkungslos.
margin Zahlenangabe Maßeinheit oder Prozent auch negative Werte sind möglich
  auto setzt man margin links und rechts auf auto, wird das Element mittig zum Elternelement plaziert.
  inherit Vererbung

Mit negativen Werten kann man es über den Rand eines anderen Elements setzen. Negative margin Werte lassen sich auch einsetzen bei verschachtelten Elementen. Wenn das innere, verschachtelte Element einen negativen margin Wert bekommt, so kann es über den padding des Elternelements hinausreichen. Im folgenden Beispiel wurde für header und footer ein negativer margin Wert gesetzt. Er entspricht dem Wert des Eltern divs mit der id wrapper. Siehe Beispiel

Das Zusammenspiel von padding und negativen Margin lässt sich auch dazu einsetzen, nebeneinanderliegende Elemente auf eine Höhe zu bringen. Siehe dazu den Tipp gleich hohe Spalten

 

Collapsing margin

Vertikale Außenabstände die aufeinanderfolgen werden nicht addiert. Stattdessen wird nur der größere der beiden margin Abstände als Zwischenraum gewertet.

so sieht's aus

Das gilt auch für ineinander verschachtelte Boxen sofern kein border und oder padding zugewiesen wurde. Im folgenden Beispiel verschwinden die Außenabstände des inneren Kasten im ersten Beispiel völlig. Die "margins" müssen zusammenstoßen. Entfernen Sie im folgenden Beispiel die border Zuweisung. Beachten Sie auch, dass in dem Beispiel die dritte Reihe gar nicht zu sehen ist, da kein Inhalt in den divs eingefügt wurde.

so sieht's aus

Boxmodell

Regeln

Fast alle HTML Elemente haben die Eigenschaften width, height, padding, border, margin

content Inhalt, Inhaltsbereich
width Breite, Inhaltsbreite
padding Innenabstand, Polsterung, Aufffüllung, Füllung
border Rahmen, Rahmenlinie
margin Außenabstand, Rand

Inhaltsbereich

Text und Bilder befinden sich im Inhaltsbereich. Wenn dessen Breite und Höhe nicht explizit per CSS definiert ist, werden Blockelemente so breit wie das umgebende Element. Die Höhe richtet sich bei allen Elementen nach dem Inhalt.

Die Breite und Höhe bei Inline Elementen richtet sich nach dem Inhalt. Inline Elementen kann man keine Breite und Höhe mit den CSS Eigenschaften width und height zuweisen.

Padding

Das padding legt sich um den Inhaltsbereich, jedoch wird Hintergundbild und Hintergrundfarbe auch auf den Paddingbereich angewendet.

Border

Um das Padding legt sich der Rahmen, mit eigener Breite und Höhe.

Margin

Der Außenabstand liegt außerhalb der Box. Er übernimmt die Hintergrundfarbe des umgebenden Elements. Margin kann auch negative Wertzuweisungen bekommen.

Inline Elemente kennen kein margin-top und margin-bottom. Links und rechts ist alles wie gehabt.

Vertikale Außenabstände kollabieren. Sie werden nicht addiert, sondern der größere der beiden marging Abstände bestimmt den Zwischenraum

Wenn zwischen den vertikalen margins nichts liegt wie beispielsweise padding oder border, gilt das auch bei ineinander verschachtelten Boxen. Die "margins" müssen zusammenstoßen.

Reset alles auf null

Zu der Methode die im folgenden erklärt wird, gibt es eine Alternative die Normalize.css

Da die Breite und Höhe die man mit width und height definiert, nur den Inhaltsbereich bestimmt, muss man padding, border und margin dazuberechnen. Gerade bei nebeneinander liegenden, gefloateten Elementen müssen diese Angaben sehr genau sein. Da die Browserstylesheets in Bezug auf margin und padding unterschiedlich ausfallen, kann es nützlich sein, alle margin- und padding- Werte für alle Elemente auf null zu setzen.

Da einige Browser die Bildlaufleiste nur einblenden, wenn sie benötigt wird, schafft man mit folgender Maßnahme einheitliche Grundvorraussetzungen. html{overflow-y: scroll;}

Nach dieser Maßnahme sind alle Abstände weg und die Elemente sitzen direkt aufeinander, durch die unteren Style Anweisungen, setzt man die wichtigsten Abstände auf akzeptable Werte.

* {margin: 0; padding: 0;}

html{overflow-y: scroll;}

h2, p, ul, ol{margin-bottom: 1em;}
ul ul {margin-bottom: 0;}
li {margin-left: 1em;}

h2 Überschriften Absätze und Listen bekommen unten einen Abstand von 1em. Verschachtelte Listen starten direkt darunter. Listenelemente brauchen links einen Abstand, damit man das Listenzeichen sieht.

Probleme mit der Größenberechnung

box-sizing

Wenn man eine Seite in mehrere Spalten aufteilt, muss man die Breite der einzelnen Boxen genau berechnen. Gibt man die Größen der Boxen mit Prozent an, die Abstände wie margin, padding, border jedoch mit Pixeln, hat man ein Problem. Es hat sich eingebürgert in solchen Fällen Boxen ineinander zu verschachteln. Man erstellt das eigentliche Layout ohne Innen- und Außenabstände. In die Boxen werden dann Boxen eingefügt, die Abstände haben. Das ist aus semantischer Sicht eine schlechte Lösung.
Eine Lösung wäre die Berechnung mit der calc() Funktion, dennoch bleibt es kompliziert.

Für diese Problematik gibt es noch eine andere Lösung in Form eines neuen Boxmodells. Damit ist es möglich, dass die Größe lediglich mit Breite/Höhe und margin berechnet wird. Padding und border befinden sich innerhalb des Inhaltsbereichs und müssen nicht hinzuaddiert werden.

so sieht's aus

Leider erkennt IE 7 die CSS Eigenschaft box-sizing nicht. Mit diesem box-sizing Wordkaround for IE7 nimmt man Rücksicht auf den alten Browser.

box-sizing
Eigenschaft Wert Bedeutung
Standardwert content-box
Vererbbar nein
Anwendbar  
box-sizing content-box das normale Boxmodell des W3C, padding und border Größe werden hinzugerechnet
border-box padding und border werden nicht zur Gesamtabmessungs des Kastens hinzugefügt, sondern befinden sich innerhalb des Inhaltsbereichs
inherit erbt das Boxmodell vom Elternelement

box-sizing für alle Elemente

Paul Irish berschreibt in einem Artikel wie man das CSS Boxmodell auf alle Elemente anwendet.

html {    box-sizing: border-box;  } 
*, *:before, *:after { box-sizing: inherit; }

Warum so und nicht einfach mit Sternchen Global Selektor. Auf diese Art ist einfacher das box-sizing für ein einzelne Seite oder ein einzelnes Element zu ändern.

 

Webseite zentrieren

Mit der folgenden Anweisung erzeugt man einen Bereich für den gesamten Inhalt und gibt diesen eine feste Breite, die auch bei einer Bildschirmauflösung von 800 x 600 Pixeln funktioniert.

gängige Auflösungen

div#wrapper {
color: #000; 

background-color: #fff; width: 720px; margin-top: 10px; maring-bottom: 10px; margin-right: auto; margin-left: auto; }


Bilder & responsive Design

Bildgröße in Prozent

Bilder werden mit dem img Element eingebunden. Mit den HTML Attributen width und height kann man die Größe des Bildes angeben. Durch die Vielzahl unterschiedlicher Viewport Größen, ist es ratsam die Bildbreite mittels CSS in Prozent anzugeben. Damit das Bild nicht größer als seine tatsächliche Größe und somit unscharf dargestellt wird, sollte man folgende CSS Eigenschaften max-width nehmen. Durch height: auto wird die Höhe entsprechend angepasst.
so sieht`s aus

img{max-width: 100%; height: auto;}

Bildbereiche abschneiden

Eine andere Möglichkeit, die sich bei Stimmungsbildern, wie Wolken, Landschaften oder Mustern einsetzen lässt besteht darin Bereiche abzuschneiden. Dazu fügt man das Bild in einen Container ein, welcher mit overflow: hidden ausgezeichnet ist.

so sieht`s aus

weitere Layoutbeispiel unter Layout