Heim > Web-Frontend > CSS-Tutorial > Wie kann ich den vertikalen Abstand zwischen Absatzumbrüchen in CSS und JavaScript vergrößern?

Wie kann ich den vertikalen Abstand zwischen Absatzumbrüchen in CSS und JavaScript vergrößern?

DDD
Freigeben: 2024-12-09 17:00:15
Original
335 Leute haben es durchsucht

How Can I Increase the Vertical Spacing Between Paragraph Breaks in CSS and JavaScript?

Ändern der Höhe von Absatzumbrüchen

Um die Sichtbarkeit von Unterabsätzen zu verbessern, stehen einige Entwickler vor der Herausforderung, den vertikalen Abstand zwischen Absatzumbrüchen zu vergrößern (
). Trotz Einschränkungen bei der Änderung des Layouts können CSS-basierte Lösungen dieses Problem beheben.

Ein Ansatz besteht darin, die Anzeigeeigenschaft des Umbruchs auf „Blockieren“ zu setzen und Ränder einzuführen, um zusätzlichen Platz zu schaffen:

br {
   display: block;
   margin: 10px 0;
}
Nach dem Login kopieren

Auch wenn die browserübergreifende Kompatibilität möglicherweise eingeschränkt ist, bietet diese Lösung eine gewisse Flexibilität. Darüber hinaus kann das Festlegen der Eigenschaft „Zeilenhöhe“ den vertikalen Abstand weiter verbessern:

line-height:22px;
Nach dem Login kopieren

Speziell bei Google Chrome kann sich das Hinzufügen von Inhalten zum Umbruch auch auf dessen Höhe auswirken:

content: " ";
Nach dem Login kopieren

Allerdings Wenn das Ziel eine vollständige Layoutunabhängigkeit ist, kann ein JavaScript-basierter Ansatz erforderlich sein.

Das obige ist der detaillierte Inhalt vonWie kann ich den vertikalen Abstand zwischen Absatzumbrüchen in CSS und JavaScript vergrößern?. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage