Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-08 07:28:02
Original
724 Leute haben es durchsucht

How can I add padding to the edges of multi-line text using CSS and HTML?

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;
}
Nach dem Login kopieren

HTML:

<div>
Nach dem Login kopieren

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.
  7. 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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage