Boxmodell Content
Jedes Element wird in HTML durch eine rechteckige Box dargestellt, die frei formatiert werden kann.
Alles was im Netz rund oder abgerundet dargestellt wird, wurde durch Tricks in "CSS" oder "JavaScript" erzeugt. Als wir bei dem "Universal-Selektor" einen Rahmen um alle Elemente in HTML gezogen haben, wurde ein Teil dieser Boxen sichtbar.
Der Boxinhalt also der "Content" (blauer Bereich), gibt vor, wie groß die Box ist.
Die Höhe der Box ("height") wird zum Beispiel bei Texten durch die Schriftgröße festgelegt.
Die Breite ("width") wird dann durch die Textlänge bestimmt.
Boxmodell padding, border und margin
Um den Content kann ein Innenabstand namens "padding" festgelegt werden.
Der Raum zwischen "Content" und den Rahmen ("border") wird als "padding" bezeichnet.
Der Abstand um den "border" wird durch die Eigenschaft "margin" definiert.
Die Eigenschaften "padding", "border" und "margin" können auf alle 4 Seiten unabhängig voneinander bestimmt werden.
- Nach oben = top
- Nach rechts = right
- Nach unten = bottom
- Nach links = left
Die CSS-Anweisung könnte so gestaltet werden:
<body>
...
<ul>
<li id="liste1">Listenpunkt 1</li>
<li class="klasse1">Listenpunkt 2</li>
<li class="klasse1">Listenpunkt 3</li>
</ul>
...
</body>
</html>
#liste1 {
color: blue;
}
.klasse1 {
color: red;
padding-left: 15px;
padding-top: 20px;
}
Es ist eindeutig zu erkennen, dass die Listenelemente von "klasse1" weiter nach rechts und auch weiter nach unten gerutscht sind, weil die Abstände links und oben vergrößert wurden.
Boxmodell im Webbrowser
In der Entwicklerumgebung F12 können wir das Boxmodell betrachten.
Von dort aus haben wir Einfluss auf den Rahmen und die Abstände, die Live manipuliert werden können, um eine Abstimmung mit dem Layout zu erarbeiten.
Das Boxmodell (Rot) wird angezeigt, wenn wir ein Element markieren (Gelb) und dann unter dem Reiter "Styles" (Grün) nach unten Scrollen.
Abstände generieren
Beim "hovern" (schweben mit dem Mauscursor) über die einzelnen Bereiche des Boxmodells wird direkt im Browser der gewählte Bereich farblich am markierten Element angezeigt, sofern er bereits definiert wurde.
In unserem Fall erkennen wir den "padding" von links und von oben, den wir in CSS bestimmt haben.
Um Abstände im Boxmodell zu verändern, reicht ein Doppelklick mit der linken Maustaste auf den entsprechenden Bereich, der verändert werden soll.
Aus den 20px von "padding-top" machen wir zur Veranschaulichung 40px und bestätigen unsere Eingabe mit der Enter-Taste .
Der neue Wert wird direkt im Webbrowser am Element angewendet.
Hinweis!
Die CSS-Datei wird dabei nicht überschrieben. Das bedeutet wenn wir die Seite neu laden, werden die Werte aus der CSS-Datei verwendet, wie wir sie zuvor dort geschrieben haben.
Das bearbeiten direkt im Boxmodell des Webbrowsers dient lediglich dazu, etwas einfacher die richtigen Abstände für einzelne Elemente zu definieren und zu testen.
Weiter mit Rahmen / Border