Wie füge ich Textzeilen in CSS einen Abstand hinzu?

Abstände zu Textzeilen hinzufügen

In diesem Artikel erfahren Sie, wie Sie am Anfang und Ende jeder Zeile Abstände hinzufügen von Text innerhalb eines bestimmten Containers.

CSS-Lösung

Obwohl es scheinbar keine direkte CSS-Lösung gibt, wurde dieses Problem mithilfe komplizierter CSS-Techniken erfolgreich gelöst. Nachfolgend finden Sie eine bewährte CSS-Lösung, die in verschiedenen Browsern funktioniert:

#titleContainer {
    width: 520px;
}

h3 {
    margin: 0;
    font-size: 42px;
    font-weight: bold;
    font-family: sans-serif;
}

/* Styling for main text line */
h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

/* Styling for subhead line */
h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

/* Container for line separation */
div {
    line-height: 1.1;
    padding: 1px 0;
    border-left: 30px solid #000;
    display: inline-block;
}

/* Positioning of main text line */
h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

/* Indentation for subhead line */
h3 .indent {
    position: relative;
    left: -15px;
}

/* Adjustments for subhead line */
h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15;
}

HTML-Struktur

Die HTML-Struktur sollte wie folgt aussehen:

<div>

Das obige ist der detaillierte Inhalt vonWie füge ich Textzeilen in CSS einen Abstand hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!