display

Ein Link bekommt padding, und die Zeilen darüber und darunter rücken keinen Pixel weg. Das liegt an display. Die Eigenschaft entscheidet, wie sich ein Element im Fluss der Seite verhält, ob es eine eigene Zeile beansprucht, ob es sich in den Text einreiht und ob es überhaupt Platz bekommt. In den Abschnitten 9 und 10 wird sie noch einmal wichtig.

01 / 03Die drei Grundtypen

block nimmt die volle verfügbare Breite und stapelt sich mit seinen Nachbarn untereinander. So verhalten sich div, p, h1 bis h6, section und die meisten anderen.

inline fließt im Text mit, wie ein Wort. Breite und Höhe werden ignoriert, senkrechte Außenabstände ebenfalls. Ein senkrechter Innenabstand wird dagegen sehr wohl gezeichnet. Er schiebt die Zeilen nur nicht auseinander, sondern legt sich über die Nachbarzeilen. So verhalten sich span, a, strong und em.

inline-block ist die Mischung. Es bleibt in der Zeile, verhält sich innen aber wie ein Block und nimmt Breite, Höhe und Abstände an.

<p>Ein Absatz mit <span class="a">inline</span>, dann <span class="b">inline-block</span> und schließlich <span class="c">block</span> mittendrin.</p>

span {
  width: 200px;
  padding: 16px;
  background-color: #dbeafe;
}

/* Fließt in der Zeile. Breite und senkrechte Außen-
   abstände werden schlicht ignoriert, der senkrechte
   Innenabstand legt sich über die Nachbarzeilen. */
.a {
  display: inline;
}

/* Bleibt in der Zeile, nimmt aber Breite und Höhe an. */
.b {
  display: inline-block;
}

/* Nimmt die volle Breite und bricht die Zeile auf. */
.c {
  display: block;
}

Alle drei Elemente im Beispiel bekommen dieselbe Breite und denselben Innenabstand. Beim ersten wird die Breite ignoriert. Der Innenabstand wirkt waagerecht ganz normal und überlappt senkrecht die Nachbarzeilen. Beim zweiten stimmt alles. Beim dritten reißt die Zeile auf.

„Wird ignoriert“ klingt nach einer Ausrede, deshalb einmal nachgesehen. Im Inspector steht am ersten Element im Auskunftsstreifen display: inline und darunter width: 200px. Als Maß steht oben im Streifen aber rund 74 × 51. Die Angabe ist also da, sie wirkt nur nicht. Beim zweiten Element steht dort 232 × 51, und das sind die 200 aus der Breite plus zweimal 16 Innenabstand. Da hast du den Unterschied zwischen inline und inline-block in zwei Zahlen.

Deshalb ist inline-block der übliche Weg für Navigationslinks. Sie sollen nebeneinander bleiben, aber eine anklickbare Fläche bekommen. Ein Link mit padding und ohne inline-block wird zwar größer und ist auf seiner ganzen Fläche anklickbar, aber diese Fläche legt sich über die Zeilen darüber und darunter, statt sie auseinanderzuschieben. Bricht eine Reihe solcher Links in eine zweite Zeile um, überlappen sich die Klickflächen.

02 / 03Ein Bild hält sich nicht daran

<p>Ein Wort <span class="probe">im Text</span> und ein Bild <img class="probe" src="/lernen/media/demo-600.jpg" alt="Platzhalterbild"> mittendrin.</p>

/* Dieselbe Regel für beide. Das span lässt sie liegen,
   das Bild nimmt sie an. */
.probe {
  width: 200px;
  margin: 24px 0;
  background-color: #dbeafe;
}

Von der Regel oben gibt es eine Ausnahme, und du hast sie schon gesehen. In der Aufgabe von Lektion 4.3 stand max-width: 100% an einem img, und es hat gewirkt.

Hier bekommen span und img dieselbe Regel, width: 200px und margin: 24px 0. Beim span wirkt beides nicht. Es bleibt so breit wie das Wort darin, und die Zeile rückt nicht auseinander. Beim Bild wirkt beides. Es misst rund 200 × 113 und schiebt die Zeile um zweimal 24 Pixel auf. Im Inspector steht im Reiter „Werte“ an beiden width: 200px. Oben im Streifen steht aber am span die Breite des Wortes und am Bild die 200. Die ungerade Höhe kommt vom Bild selbst. Es ist 600 × 338 groß, und bei 200 Pixeln Breite bleibt das Verhältnis erhalten.

Der Grund ist der Inhalt. Ein span enthält Text, den der Browser umbricht. Ein Bild bringt etwas Fremdes mit eigenen Maßen mit. Solche Elemente heißen ersetzte Elemente, und außer img gehören video und iframe dazu. Der Begriff kam bei den Pseudoelementen schon vor. Formularfelder wie input und button verhalten sich ähnlich, sind aber ohnehin von Haus aus inline-block.

Für alles, was du selbst mit Text füllst, gilt die Regel von oben also weiter. Für ein Bild gilt sie nie.

03 / 03Verstecken auf zwei Arten

<div class="kasten">Eins</div>
<div class="kasten weg">Zwei</div>
<div class="kasten unsichtbar">Drei</div>
<div class="kasten">Vier</div>

.kasten {
  display: inline-block;
  padding: 12px;
  background-color: #dbeafe;
}

/* Weg aus dem Fluss und weg für Screenreader. */
.weg {
  display: none;
}

/* Der Platz bleibt frei. Vorgelesen wird trotzdem nichts. */
.unsichtbar {
  visibility: hidden;
}

display: none entfernt das Element vollständig. Es nimmt keinen Platz ein, und Screenreader lesen es nicht vor.

visibility: hidden macht es unsichtbar, lässt den Platz aber stehen. Vorgelesen wird es ebenfalls nicht.

Den zweiten Fall braucht man seltener. Er ist praktisch, wenn etwas verschwinden soll und das Layout dabei nicht springen darf. Ein Ladehinweis zum Beispiel, dessen Platz schon reserviert ist.

Soll etwas nur für Screenreader da sein, hilft keiner der beiden. Was display: none oder visibility: hidden bekommt, ist auch dort weg. Dafür gibt es eine eigene Technik. Dabei wird das Element nicht versteckt, sondern winzig gemacht und beschnitten, mit position: absolute, width: 1px, height: 1px, overflow: hidden und clip-path: inset(50%). Es bleibt im Baum, es bleibt vorlesbar, und zu sehen ist es trotzdem nicht.

In der Aufgabe wird aus einer Liste mit Links eine Reihe aus Kacheln.