Einheitliche Einrückung von Listen

Eine Liste erstellen

Eigenständiger Listeneintrag

Betrachten wir zunächst einen einzelnen Listeneintrag, der nicht in eine Liste eingebettet ist. Wenn Sie das HTML-Element <li> verwenden, setzt der Browser den Wert von display auf list-item. Ob Listeneinträge außerhalb einer Liste eine Markierung erhalten, hängt vom Browser ab. Mit list-style-type: none können Sie diese Markierung entfernen.

li {
  border: 1px dashed red;
}
li:nth-of-type(n + 4) {
  list-style-type: none;
}

li {
  width: 15em;
}

<p>Default bullets depend on the browser:</p>
<li>A list item</li>
<li>A list item</li>
<li>A list item</li>
<p>These list items have their bullets removed:</p>
<li>A list item</li>
<li>A list item</li>
<li>A list item</li>

Der gepunktete rote Rahmen zeigt die äußeren Ränder des Inhaltsbereichs jedes Listeneintrags. Bislang haben die Listeneinträge weder Innenabstände noch Rahmen.

Verschachtelte Listeneinträge

Nun umschließen wir die Einträge mit einem übergeordneten Element, in diesem Fall einer ungeordneten Liste (<ul>). Nach dem CSS-Box-Modell müssen die Boxen der Listeneinträge innerhalb des Inhaltsbereichs des übergeordneten Elements dargestellt werden.

ul {
  border: 1px dashed blue;
}
li {
  border: 1px dashed red;
  list-style-type: none;
}

body {
  width: 15em;
}

<ul>
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

Der gepunktete blaue Rahmen zeigt die Ränder des Inhaltsbereichs des <ul>-Elements. Dieses übergeordnete Element hat sowohl Außen- als auch Innenabstände. Browser legen für ungeordnete Listen standardmäßig folgende Stile fest:

ul {
  /* user-agent styles */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

Standardposition der Markierungen

Nun blenden wir die Markierungen der Listeneinträge wieder ein. Da es sich um eine ungeordnete Liste handelt, übernehmen die Listeneinträge von ihrem übergeordneten <ul>-Element den Browserstil list-style-type: disc;. Dadurch erhalten sie ausgefüllte kreisförmige Markierungen.

li {
  border: 1px dashed red;
}
ul {
  border: 1px dotted blue;
}
ul:last-of-type {
  list-style-position: inside;
}

ul {
  width: 15em;
}

<p>These default to <code>list-style-position: outside</code>.</p>
<ul>
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>
<p>These have <code>list-style-position: inside</code> set.</p>
<ul>
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

Optisch liegen die Markierungen außerhalb des Inhaltsbereichs von <ul>. Entscheidend ist hier aber, dass sie außerhalb der „Hauptbox“ der <li>-Elemente liegen, nicht außerhalb der von <ul>. Sie sind gewissermaßen Anhänge der Listeneinträge: Sie befinden sich außerhalb des Inhaltsbereichs von <li>, gehören aber weiterhin zu diesem Element.

Deshalb erscheinen die Markierungen in jedem modernen Browser außerhalb eines Rahmens, der für ein <li>-Element festgelegt wurde, wenn list-style-position den Standardwert outside hat oder ausdrücklich darauf gesetzt ist. Ändern wir den Wert zu inside, werden die Markierungen innerhalb des Inhaltsbereichs von <li> platziert – als wären sie eine Inline-Box ganz am Anfang des <li>-Elements.

Standardeinrückung

Wie oben erwähnt, geben alle Browser dem übergeordneten <ul>-Element sowohl Außen- als auch Innenabstände. Die CSS-Standardeinstellungen der Browser unterscheiden sich zwar etwas, enthalten aber alle Folgendes:

ul,
ol {
  /* user-agent styles */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}
ol {
  list-style-type: decimal;
}
li {
  display: list-item;
  text-align: match-parent;
}
::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

Alle Browser setzen padding-inline-start für das <ul>-Element standardmäßig auf 40 Pixel. In Sprachen mit Schreibrichtung von links nach rechts, etwa Englisch, ist dies der linke Innenabstand. Innenabstände, die in den Stylesheets der Website festgelegt werden, haben Vorrang.

Wenn Sie die Einrückung ausdrücklich festlegen möchten, fügen Sie Folgendes zu Ihren Stylesheets hinzu. So stellen Sie sicher, dass Listeneinträge im Hauptinhaltsbereich Ihres Dokuments innerhalb des Abschnitts <main> korrekt eingerückt sind, sofern keine andere Regel Vorrang hat:

:where(main ol, main ul) {
  margin-inline-start: 0;
  padding-inline-start: 40px;
}

Verschachteln Sie Ihre <li>-Elemente außerdem immer in einem <ul>- oder <ol>-Element.