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