Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Beispiele für die Anwendung des Box-Modells

Anhand der folgenden Beispiele werden wir die Möglichkeiten des Box-Modells Schritt für Schritt „erforschen“.

Als HTML-Code kommt immer der folgende zum Einsatz.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Box-Modell erkunden</title>
    <link href="css-box-modell.css" rel="stylesheet">
</head>
<body>

<div id="bereich">
    Beschreibung der CSS-Eigenschaften
</div>

</body>
</html>

Beim selber ausprobieren muss man nicht mehr den HTML-Code ändern. Meine Beispielausgaben werden aber erweitert sein!

In den Ausgaben werde ich zum besseren Verständnis anstelle des Textes „Beschreibung der CSS-Eigenschaften“ die in dem Schritt verwendete CSS-Anweisungen anzeigen lassen.

Und nun viel Spaß beim mitbauen.

Breite und Höhe festlegen

Eigenschaften der einzelnen Bereiche:

  • Hintergrundfarbe: gelb
  • Breite: 400 Pixel
  • Höhe: 100 Pixel
#bereich {
    background-color: yellow;
    width: 400px;
    height: 100px;
}

Ergebnis:

Breite und Höhe im Box-Model festlegen

Box mit Breite in Prozent angegeben

Im folgenden Beispiel wird die Breite der Box über eine Prozentangabe gemacht und die Höhe zu klein gewählt, dass der Textinhalt nicht ganz passen wird:

  • Breite: 50 Prozent
  • Höhe: 50 Pixel
#bereich {
    background-color: yellow;
    width: 50%;
    height: 50px;
}

Und als Ausgabe im Browser:

50 Prozent der Fensterbreite

Rahmen mit grünen Rand

#bereich {
    background-color: yellow;
    width: 400px;
    height: 100px;
    border: 3px green solid;
}

Ausgabe im Browser:

Rahmen in grün

zusätzlich Innenabstand

#bereich {
    background-color: yellow;
    width: 400px;
    height: 100px;
    padding: 10px;
    border: 3px green solid;
}

Ausgabe im Browser:

Innenabstand

zusätzlich Außenabstand

#bereich {
    background-color: yellow;
    width: 400px;
    height: 100px;
    padding: 10px;
    margin: 60px;
    border: 3px green solid;
}

Ausgabe im Browser:

Außenabstand

Randgestaltung und Möglichkeiten

Und nun Spielvarianten zum Rand - dem Rand kann für jede Seite eine Definition mitgegeben werden.

Mögliche Werte:
Linie = solid
kein Rahmen = none
unsichtbarer Rahmen = hidden
gepunktet = dotted
gestrichelt = dashed
doppelte Linie = double
3D-Effekt = groove |ridge | inset | outset

#bereich {
    background-color: yellow;
    width: 400px;
    padding: 10px;
    margin: 15px;
    border-top: 3px green solid;
    border-right: 2px red hidden;
    border-bottom: 2px black dashed;
    border-left: 12px red double;
}

Ausgabe im Browser:

Spielvarianten mit Rand

unterschiedliche Definitionen der Abstände

unterschiedliche Definitionen der Abstände für oben, unten, rechts und links

Beim Außenabstand (margin)

Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert werden:

  • margin-top: Wert;
  • margin-right: Wert;
  • margin-bottom: Wert;
  • margin-left: Wert;

Beim Innenabstand (padding)

Genauso wie beim Rahmen kann für den Innenabstand verschiedene Abstände definiert werden.

  • padding-top: Wert;
  • padding-right: Wert;
  • padding-bottom: Wert;
  • padding-left: Wert;

Angaben verkürzen

Es gibt Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe (z. B. margin: 20px; bewirkt, dass auf allen 4 Seiten ein Abstand von 20px eingehalten wird).

Soll für oben/unten und rechts/links derselbe Wert definiert werden, ist die Schreibweise margin:20px 35px; - 20px für oben/unten, 35px rechts/links

In der verkürzten Form können auch alle 4 Seiten definiert werden: margin:20px 35px 15px 60px; - 20px für oben, 35px rechts, 15px unten, 60px links - gelesen wird wie die Uhrzeit, man fängt oben an.

Die verkürzte Schreibweise funktioniert sowohl für:

  • margin
  • padding
  • border

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe