Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-11-06 19:09:03
Original
114 Leute haben es durchsucht

How to Add Padding to Lines of Text in CSS?

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

HTML-Struktur

Die HTML-Struktur sollte wie folgt aussehen:

<div>
Nach dem Login kopieren

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!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!