Wie kann ich mithilfe von CSS und HTML Abstände an den Rändern von mehrzeiligem Text hinzufügen?

Fügen Sie mithilfe von CSS und HTML Abstände an den Rändern von mehrzeiligem Text hinzu

Um diesen Effekt zu erzielen, ohne geschützte Leerzeichen zu verwenden Tags können wir eine Kombination aus CSS und HTML verwenden. So geht's:

CSS:

#titleContainer {
    width: 520px;
}

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

h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

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

h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

h3 .indent {
    position: relative;
    left: -15px;
}

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

HTML:

<div>

Penjelasan:

1. Wir packen den Text in ein <div> mit der ID „titleContainer“, um den gesamten Text zu enthalten.
2. Wir packen den Text in ein

   Markieren und definieren Sie Stile für das gesamte

   sowie für das verschachtelte Elemente mit den Klassen „heading“ und „subhead“.

3. Um die Zeilentrennung zu erstellen, erstellen wir ein weiteres <div> innerhalb des

   und gestalten Sie es mit Zeilenhöhe, Polsterung, linkem Rand und Anzeige. Dadurch werden die Zeilen getrennt und gleichzeitig ihre Ausrichtung beibehalten.

4. Wir umschließen den Text in einem mit der Klasse „indent“ und verwenden Sie position: relative und left: -15px, um den Text nach links zu verschieben und so den gewünschten Abstand am Zeilenanfang zu erzeugen.
5. Der Subtext mit der Klasse „subhead“ ist nach links verschoben und mithilfe von Rändern positioniert, um eine ordnungsgemäße Ausrichtung sicherzustellen.
6. Internet Explorer (IE) erfordert einen zusätzlichen Stil, um den Rand des Untertiteltextes zu korrigieren, der in der Bedingung enthalten ist Kommentare.

Diese CSS- und HTML-Lösung bietet eine flexible und browserübergreifende kompatible Möglichkeit, Abstand am Anfang und Ende jeder Textzeile hinzuzufügen, wie im zuvor bereitgestellten Screenshot von Chrome gezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS und HTML Abstände an den Rändern von mehrzeiligem Text hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!