CSS/Tutorials/Boxmodell

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche
CSS-icon.svg
Was vielen nicht bewusst ist: HTML ist von Haus aus responsiv - Block-Elemente wie Überschriften oder Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, sodass er nach unten in einer neuen Zeile dargestellt wird.

Mit CSS können Sie jedoch Größenangaben und Abstände festlegen. Was auf unserem Symbolbild wie ein Unfall aussieht, zeigt eigentlich nur, wie viele Möglichkeiten CSS bietet.

  1. „klassisches“ Boxmodell
    • box-sizing
  2. Größenangaben
    • width
      • max-width + min-width
    • height
      • max-height + min-height
    • intrinsische Werte
      • max-content, min-content
      • fit-content()
      • minmax()
  3. übergroßer Inhalt
    • overflow
    • text-overflow
    • scroll
  4. Außenabstände (margin)
    • zusammenfallende Außenabstände
      (collapsing margins)
  5. Innenabstände (padding)
    • padding-bottom height fix
    • aspect-ratio
  6. Rahmen
    • border + border-radius
    • outline
    • box-shadow
  7. Logische Eigenschaften
    • block-size und inline-size
    • margin-block + margin-inline
    • padding-block + padding-inline
    • border-block + border-inline



Das „klassische“ Boxmodell[Bearbeiten]

Im visuellen Anzeigemodell erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Boxmodell“. Eine Box kann bestehen aus:

  • Dem Inhaltsbereich (client area), also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
  • einem Innenabstand (padding),
  • einem Rahmen (border) und
  • einem Außenabstand (margin).

Bei Block-Elementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.

Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.

Darstellung des CSS Box-Modells


Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom. Da dies nur bei einer Schreibrichtung von links nach rechts wirklich stimmig ist, wurden die logischen Eigenschaften eingeführt, die im letzten Kapitel dieses Kurses vorgestellt werden.

Referenz-Box[Bearbeiten]

Die einzelnen Rechtecke werden von innen nach außen bezeichnet als

  • content-box: (Inhaltsbox) Bereich, der durch den Inhalt oder die Eigenschaften width und height festgelegt wurde.
  • padding-box: (Polsterungsbox) Bereich, der content-box und padding (Innenabstand) umfasst. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante identisch.
  • border-box: (Rahmenbox) Box, die content-box, einen möglichen Innenabstand und die durch border festgelegten Rahmen umfasst. Besitzt eine Box keinen Rahmen, so ist die Rahmenbox mit der Polsterungsbox identisch.
  • margin-box: Box mitsamt durch margin festgelegten Außenabständen. Sind für eine Box keine Außenabstände definiert, so ist die Außenkante mit der Rahmenkante identisch.

Information: Geschichtliches

Die ursprüngliche Definition, die Angaben von width und height als Abmessungen lediglich des Inhaltes festzulegen ist wenig intuitiv. Eigentlich erwartet man, dass eine Breiten- bzw. Höhenangabe den gesamten Platzbedarf des Elementes widerspiegelt.
Zudem interpretierten alte Internetexplorer das Box-Modell falsch, sodass Webentwickler auf diese besondere Rücksicht nehmen mussten (Quirks Mode). Ebenso war es schwierig bis unmöglich, ein responsives Layout zu erstellen, welches etwa prozentuale Breitenangaben mit pixelgenauen Angaben für die Rahmenbreite kombinierte.


Diese Bezeichnungen finden sich als Werte in einigen Eigenschaften wieder, etwa box-sizing, background-clip, background-origin oder mask.

Beachten Sie: Der Begriff „Box“ ist nicht mit dem Begriff „Element“ gleichzusetzen. Nicht jedes Element erzeugt eine Box, aber Boxen können auch erzeugt werden, wenn in einem Dokument kein Element als direktes Gegenstück existiert.

Im Einstieg in CSS-Kurs gibt es im Boxmodell-Kapitel einige anfängergerechte Beispiele und Erklärungen.

Was bei pixelgenauem Layout zu Rundungsfehlern, dem Zwang zu Browserweichen und zusätzlichem Wartungsaufwand führte, erwies sich im flexiblen Layout als nahezu unmöglich:

I would love a different box model! I find it bizarre that padding and border add the width of an object, and would love to be able to give something like a textarea 100% width and 3px padding without worrying what it’s going to do the layout. Perhaps something like padding-inside as a new selector?

In that vein I also wish I could specify a 100% width for an element, minus a set fixed width. Again, very useful when creating fluid designs with form elements!

Jon Hicks: CSS Wishlist: 21 Designer/Developers Sound Off[1]

Alternatives Box-Modell mit box-sizing[Bearbeiten]

Mit der box-sizing-Eigenschaft können Sie bestimmen, worauf sich Angaben zu den Abmessungen eines Elementes beziehen. Damit können Sie zwischen dem klassischen Boxmodell und dem intuitiveren des Quirksmodus umschalten.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Erlaubt sind dabei eine der folgenden Angaben.

  • content-box, Standardwert, Angabe gilt nur für den Inhalt
  • border-box, Angabe gilt für Inhalt, Innenabstand und Rahmen. Dies entspricht dem Quirksmodus des Internet Explorers.
content-box oder border-box? ansehen …
section {
  border: 1em solid green;
  padding: 1em;
  width: 20em;
}
#content-box {
  box-sizing: content-box;
}
#border-box {
  box-sizing: border-box;
}
<section id="content-box">
  ...
</section>
<section id="border-box">
  ...
</section>
Dieses Beispiel enthält zwei section-Elemente die jeweils einen Rahmen und einen Innenabstand der Breite 1em haben. Ebenso haben beide eine Breite von 20em zugewiesen bekommen.
Beim ersten section-Element wird eine Inhaltsbreite von 20em festgelegt, beim zweiten Element ergeben sich die 20em als Summe der Breiten von Inhalt, Innenabstand und Rahmen.

Praktischer Einsatz[Bearbeiten]

Empfehlung: Sie sollten im Sinne einer guten Wartbarkeit des CSS-Codes auf verschiedene Werte von box-sizing innerhalb eines Dokuments verzichten.

Die Eigenschaft box-sizing wird nicht automatisch vererbt. Deshalb schlug Chris Coyier vor, für die box-sizing Eigenschaft global den Wert inherit festzulegen.[2]

Miriam Suzanne widerspach diesem Ansatz auf der 2018er beyond tellerand Konferenz und empfahl, auf die Vererbung zu verzichten und einfach bei allen Elementen den Wert für box-sizing festzulegen:

There’s a reason that box model doesn’t inherit by default, and there’s no reason that it should inherit. We don’t inherit margins, we don’t inherit borders. Layouts should not be inherited; layouts don’t nest in that way. So I don’t recommend this solution.

Es gibt einen Grund, weshalb das Boxmodell nicht per Default vererbt wird, und es gibt keinen Grund, dass es vererbt werden sollte. Wir erben keine Margins, wir erben keine Borders. Layouts sollten nicht vererbt werden, Layouts schachteln sich nicht auf diese Art. Also, diese Lösung empfehle ich nicht.

Miriam Suzanne: Don’t use my grid system or any others (ab 8:15)[3]
Normalisierung von box-sizing
*, ::before, ::after { box-sizing: border-box; }
Die Eigenschaft box-sizing wird für alle Elemente auf border-box gestellt.


Boxmodell
(Übersicht)

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Quellen

  1. Jon Hicks:CSS Wishlist: 21 Designer/Developers Sound Off
  2. Inheriting box-sizing Probably Slightly Better Best-Practice By Chris Coyier On July 15, 2014
    Vererbung von box-sizing
    html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; }
    Die Eigenschaft box-sizing wird nur für html eingestellt und alle Elemente erben den Wert ihres Elternelements. Hierdurch wird eine Änderung bei einem Element auf dessen Kindelemente weitervererbt. Bei *, ::before, ::after {box-sizing: border-box;} würden die Kindelemente einen anderen Ausgangswert nicht übernehmen.
  3. Miriam Suzanne:Don’t use my grid system or any others (ab 8:15)