css mit Adi Prinz

Standardmäßige Größenberechnung

Standardmäßig verwendet ein Element box-sizing: content-box. Die mit width und height festgelegten Werte gelten dabei nur für den Inhaltsbereich.

div {
  width: 300px;
  padding: 25px;
  border: 25px solid #ff0000;
  margin: 25px;
}

Die sichtbare Box vom linken bis zum rechten Rand ist in diesem Beispiel 400 Pixel breit:

300px Content
+ 50px Padding
+ 50px Border
= 400px sichtbare Breite

Werden zusätzlich die beiden Außenabstände berücksichtigt, belegt das Element horizontal insgesamt 450 Pixel:

400px sichtbare Breite
+ 50px Margin
= 450px gesamter Platzbedarf

Die Höhe richtet sich nach dem Inhalt, weil keine feste height angegeben wurde.

Zusammenfallende Außenabstände

Vertikale Außenabstände benachbarter Blockelemente im normalen Dokumentfluss können zusammenfallen. Dieses Verhalten wird Margin Collapsing genannt.

h3 {
  margin: 20px 0;
}

p {
  margin: 12px 0;
}

<h3>Überschrift</h3>
<p>Absatz eins</p>
<p>Absatz zwei</p>

Zwischen der Überschrift und dem ersten Absatz entstehen nicht 32 Pixel, sondern 20 Pixel Abstand. Zwischen den beiden Absätzen entstehen nicht 24 Pixel, sondern 12 Pixel.

Bei zwei positiven Außenabständen wird der größere Wert verwendet. Treffen positive und negative Außenabstände aufeinander, wird der negative Wert vom positiven Wert abgezogen. Sind alle beteiligten Außenabstände negativ, wird der am stärksten negative Wert verwendet.

Regeln für zusammenfallende Außenabstände

• Nur vertikale Außenabstände, also margin-top und margin-bottom, können zusammenfallen.
• Horizontale Außenabstände fallen nicht zusammen.
• Vertikale Außenabstände benachbarter Blockelemente im normalen Dokumentfluss können zusammenfallen.
• Der obere Außenabstand eines Elternelements kann mit dem oberen Außenabstand seines ersten Kindelements zusammenfallen.
• Der untere Außenabstand eines Elternelements kann mit dem unteren Außenabstand seines letzten Kindelements zusammenfallen.
• Außenabstände von absolut positionierten Elementen und Floats fallen nicht zusammen.
• Außenabstände von Flex- und Grid-Elementen fallen nicht zusammen.
• Zwischen einem Elternelement und seinem Kind verhindert beispielsweise ein Rahmen, ein Innenabstand oder ein neuer Formatierungskontext das Zusammenfallen.

box-sizing

Bei content-box gelten width und height nur für den Inhaltsbereich. Padding und Border werden zur angegebenen Größe hinzugerechnet.

Bei border-box sind Content, Padding und Border bereits in der angegebenen Breite und Höhe enthalten. Der Außenabstand margin gehört jedoch nicht dazu.

Mögliche Werte von box-sizing

• content-box: Breite und Höhe gelten nur für den Inhaltsbereich; dies ist der Standardwert.
• border-box: Breite und Höhe enthalten Content, Padding und Border.

p {
  width: 400px;
  padding: 25px;
  border: 25px solid #ff0000;
  box-sizing: border-box;
}

Das Element ist in diesem Beispiel vom linken bis zum rechten Rahmen insgesamt 400 Pixel breit. Für den Inhalt verbleiben 300 Pixel:

400px Gesamtbreite
- 50px Padding
- 50px Border
= 300px Content

box-sizing global verwenden

In vielen Projekten wird border-box für alle Elemente verwendet. Dadurch lassen sich Abmessungen einfacher berechnen.

html {
  box-sizing: border-box;
}

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

Auch die Pseudoelemente ::before und ::after werden dabei berücksichtigt.

outline

Die Eigenschaften einer Outline können einzeln oder mit der Kurzschreibweise outline angegeben werden.

p {
  border: 1px solid red;
  outline: 4px dotted green;
  outline-offset: 3px;
}

In diesem Beispiel besitzt jedes p-Element einen roten Rahmen und eine grüne, gepunktete Außenlinie. Mit outline-offset wird ein Abstand zwischen Rahmen und Außenlinie erzeugt.

Outline als Fokusmarkierung

Bei der Bedienung mit der Tastatur zeigt eine Outline, welches Element gerade den Fokus besitzt. Dieser Fokusstil sollte aus Gründen der Barrierefreiheit nicht ersatzlos entfernt werden.

a:focus-visible,
button:focus-visible {
  outline: 3px solid #ff8c00;
  outline-offset: 3px;
}

Wird die standardmäßige Outline mit outline: none entfernt, muss sie durch eine mindestens ebenso gut sichtbare Fokusmarkierung ersetzt werden.

Werte für overflow

• visible: Inhalt bleibt sichtbar; Standardwert
• hidden: Inhalt wird abgeschnitten; die Box bleibt ein Scroll-Container und kann programmgesteuert gescrollt werden
• clip: Inhalt wird abgeschnitten, ohne einen Scroll-Container zu erzeugen
• scroll: Inhalt wird abgeschnitten und die Box ist scrollbar; Scrollleisten können dauerhaft erscheinen
• auto: Scrollleisten erscheinen bei Bedarf

.box {
  width: 200px;
  height: 200px;
  overflow: auto;
}
    

overflow-x und overflow-y

Mit overflow-x und overflow-y wird der Überlauf je Achse gesteuert. Werden visible oder clip mit einem anderen Wert für die zweite Achse kombiniert, kann der berechnete Wert angepasst werden.

.box {
  overflow-x: hidden;
  overflow-y: auto;
}
    

overflow-inline und overflow-block

Die logischen Eigenschaften richten sich nach der Schreibrichtung. overflow-inline steuert den Überlauf in Inline-Richtung und overflow-block den Überlauf in Block-Richtung.

text-overflow

text-overflow legt fest, wie abgeschnittener Inline-Inhalt markiert wird. Für die bekannte Darstellung mit Auslassungspunkten sind zusätzlich overflow: hidden und ein verhinderter Zeilenumbruch erforderlich.

.title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}