CSS-Kurs / Absätze und Listen gestalten

CSS steuert Absatzausrichtung, Einrückung, Zeilenabstand und Ränder, ohne die Bedeutung des Textes zu verändern. Bei Listen beeinflussen Stil und Position der Markierungen das Erscheinungsbild von umgebrochenen Elementen, während HTML weiterhin die Listenstruktur und -reihenfolge liefert.

Trennen Sie Zeilenabstand und Absatzabstand

.article p {
  line-height: 1.65;
  margin-block: 0 1.2em;
}

Ein größerer Wert für line-height erhöht die Höhe der Zeilenboxen innerhalb desselben Absatzes. Die Grundlagen erklärt Schriftarten, Schriftgrößen und Zeilenhöhe. Das Erhöhen von margin-block erhöht den Außenabstand zwischen dem Absatzfeld und dem folgenden Inhalt. Die beiden austauschbar zu verwenden, kann bei kurzen Absätzen gut aussehen, kann jedoch bei langen Absätzen zu übermäßigem Zeilenabstand führen.

margin-block: 0 1.2em setzt den Block-Start-Abstand auf null und den Block-End-Abstand auf 1,2em. In diesem Beispiel für horizontales Schreiben entspricht das dem oberen und unteren Rand. Vertikales Schreiben ändert die physikalischen Richtungen. Hier verwendet em die eigene Schriftgröße des Absatzes. Siehe MDN: margin block.

Browser liefern standardmäßige Absatz- und Listenabstände. Überschreiben Sie diese bewusst, um diese Standards von Ihrem eigenen Abstand zu unterscheiden. Benachbarte vertikale Blockabstände können zusammenfallen, anstatt sich zu addieren. Dieses Beispiel setzt den Anfangsabstand des Absatzes auf null und steuert die Lücke mit seinem Endabstand. Für weitere Details siehe Boxmodell: Inhalt, Padding, Rahmen und Außenabstand.

Vergleichen Sie die Textausrichtung und den Einzug der ersten Zeile

.article p { text-align: start; }

.article .intro { text-indent: 1.5em; }

text-align bestimmt die Ausrichtung von Text innerhalb einer Zeile. start ist der Beginn des Textflusses und befindet sich in einem einfachen von links nach rechts verlaufenden Dokument links. Dies ist keine Eigenschaft, die das gesamte Absatzfeld in die Mitte des Bildschirms verschiebt. Lange zentrierte Beschreibungen haben für jede Zeile unterschiedliche Startpositionen, daher sollte man zuerst eine leicht zu lesende Ausrichtung für den Fließtext wählen.

text-indent: 1.5em rückt den Beginn der ersten Zeile ein, nicht jede Zeile. Im vollständigen Beispiel trägt der erste Absatz class="intro", damit Sie den Einzug beobachten können. Wenn Sie einen gesamten Absatz einrücken möchten, müssen Sie andere Einstellungen wie z. B. Padding überprüfen. Ändern Sie die Ausrichtung, Einzüge und Ränder und vergleichen Sie, welche Teile sich bewegen.

Positionieren Sie Listensymbole und umgebrochenen Text

Verwenden Sie ol für geordnete Prozesse und ul für Elemente, bei denen die Reihenfolge nicht wichtig ist. Das Ersetzen einer Zahl durch einen Punkt mit CSS ändert nicht die ursprüngliche HTML-Struktur. Wählen Sie zuerst die Bedeutung des Inhalts und passen Sie dann die Anzeigeart an.

Mit outside sitzen Listenmarker außerhalb des Inhaltsfelds, daher sollte am Inline-Anfang der Liste Platz reserviert werden. In diesem Beispiel von links nach rechts liefert padding-inline-start: 1.6em linke Innenabstände. Bei inside nimmt der Marker Platz in der ersten Zeile ein; nachfolgende Zeilen können sich unter seiner Position erstrecken. Vergleichen Sie realistisch umgebrochene Elemente.

Das Entfernen von Listenmarkern erfordert auch eine Barrierefreiheitsprüfung. Safari kann eine Liste mit list-style: none aus dem Accessibility-Tree entfernen, wenn sie außerhalb von nav liegt. Ziehen Sie role="list" in Betracht, wenn die Beibehaltung der Listen-Semantik notwendig ist. Das vollständige Beispiel dieser Lektion behält seine Marker. Siehe MDN: Listenstil.

Trennen Sie den Abstand der Elemente vom Zeilenabstand

.article li + li { margin-block-start: 0.45em; }

li + li wählt das li aus, das unmittelbar nach einem anderen li kommt. Vor dem ersten Listenelement entsteht kein zusätzlicher Abstand; er wird nur vor dem zweiten und jedem weiteren Eintrag eingefügt. Teile innerhalb eines Elements, die sich über mehrere Zeilen erstrecken, werden durch die Zeilenhöhe gesteuert, die von der Liste übernommen wird. Wenn Sie den Abstand nur zwischen den Elementen erhöhen, weil der Inhalt dicht ist, können die Sätze innerhalb des Elements dennoch schmal erscheinen.

Führen Sie das vollständige Absatz- und Listenbeispiel aus

Speichern Sie den untenstehenden Code als UTF-8 in paragraphs.html und öffnen Sie ihn. Da wir die Sätze in beiden Listen gleich gehalten haben, können wir nur vergleichen, wo sie erscheinen. Einzüge der ersten Zeile und nummerierte Listen werden auch in derselben Datei überprüft.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing paragraphs and lists</title>
  <style>
    body { margin: 24px; font-family: sans-serif; color: #333; }
    .article { max-width: 65ch; }
    .article p { line-height: 1.65; margin-block: 0 1.2em; text-align: start; }
    .article .intro { text-indent: 1.5em; }
    .article ul, .article ol { padding-inline-start: 1.6em; margin-block: 0 1.2em; line-height: 1.65; }
    .article li + li { margin-block-start: 0.45em; }
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
    ol { list-style-type: decimal; }
  </style>
</head>
<body>
  <main class="article">
    <h1>Small Garden visitor guide</h1>
    <p class="intro">If this is your first visit, check the signs first. This paragraph has a first-line indent. When the text wraps, the remaining lines return to the normal paragraph edge.</p>
    <p>Use line-height for spacing between lines and margin for spacing between paragraphs. Narrow the window and check readability as the text wraps onto more lines.</p>
    <h2>outside list</h2>
    <ul class="outside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>inside list</h2>
    <ul class="inside">
      <li>Check the soil before watering. Wipe up water spilled outside the pot so that other visitors do not slip.</li>
      <li>Read the labels and signs, then follow the path. Compare how the second line of a wrapped list item aligns with its first line.</li>
    </ul>
    <h2>Preparation in order</h2>
    <ol><li>Read the notice.</li><li>Prepare a watering can.</li><li>Put tools back after use.</li></ol>
  </main>
</body>
</html>

Testen Sie jede Abstandänderung

1. Reduzieren Sie die Fensterbreite, sodass Listenpunkte mehr als eine Zeile umfassen. Bei outside sollen Folgezeilen unter dem Textanfang der ersten Zeile beginnen. Bei inside können sie bis unter die Markerposition zurückreichen.
2. Ersetzen Sie text-indent in .intro durch 0. Überprüfen Sie, ob sich die Startposition nur der ersten Zeile des ersten Absatzes ändert, und setzen Sie sie auf 1.5em zurück.
3. Ändern Sie den Wert von margin-block-end des Absatzes auf 0. Stellen Sie sicher, dass der Abstand zwischen den Absätzen verringert wird, während der Zeilenabstand innerhalb des Absatzes beibehalten wird. Testen Sie getrennt davon line-height: 1.2. Stellen Sie anschließend margin-block: 0 1.2em und line-height: 1.65 wieder her.
4. Vergleichen Sie, indem Sie 0.45em von li + li auf 0 und 1em ändern. Stellen Sie sicher, dass der Zeilenabstand innerhalb des Elements und der Abstand vor dem ersten Element nicht unterschiedlich sind.

Wenn ein Symbol abgeschnitten ist, überprüfen Sie die Innenabstände der Liste und das Überlaufen der äußeren Elemente. Wenn nur einige Absätze unterschiedlich formatiert sind, überprüfen Sie den Selektor und die standardmäßigen Browserstile. 65ch im gesamten Beispiel ist die maximale Länge basierend auf der Breite der Zahl 0 und ist kein fester Wert für die Anzahl der Zeichen.