Zeilenumbruch nach <h1> -Tags entfernen?

92

Ich habe ein Problem mit Zeilenumbrüchen nach dem Entfernen <h1>Tag, wie immer wenn er druckt, fügt einen Zeilenumbruch direkt nach dem es, so etwas wie <h1>Hello World!</h1> <h2>Hello Again World!</h2>druckt wie folgt aus :

Hello World!

Hello Again World!

Ich bin mir nicht sicher, welche Tags ich in CSS ändern muss, aber ich gehe davon aus, dass dies etwas mit dem Auffüllen oder den Rändern zu tun hat

Ich möchte auch die vertikale Polsterung beibehalten, wenn dies überhaupt möglich ist.

html css header styles stylesheet Jack Wilsdon
quelle

152

Klingt so, als ob Sie sie als Inline formatieren möchten. Standardmäßig h1und h2sind Blockelemente , die die gesamte Breite der Linie erstrecken. Sie können sie so ändern, dass sie mit CSS inline sind:

h1, h2 {
    display: inline;
}

Hier ist ein Artikel, der den Unterschied zwischen blockund inlineausführlicher erklärt: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Verwenden Sie Folgendes, um die vertikale Polsterung beizubehalten inline-block:

h1, h2 {
    display: inline-block;
}

Ben Lee
quelle

9

<h1>Tags haben {display: block}gesetzt. Sie sind Elemente auf Blockebene. So schalten Sie das aus:

{display: inline}

tkone
quelle

Standardmäßig h Tags mit Rand, Auffüllen, so dass wir diese entfernen müssen

Adeel Mughal

Ich möchte auch die vertikale Polsterung beibehalten, wenn dies überhaupt möglich ist. Ich habe versucht, display: inline; anzuzeigen, aber die vertikale Polsterung ist nicht mehr vorhanden.

Jack Wilsdon

1

Durch Entfernen von Polsterung und Rand wird die neue Linie nicht entfernt. Die neue Zeile wird verursacht, weil es sich um Elemente auf Blockebene handelt. Dies bedeutet, dass sie den gesamten horizontalen Raum einnehmen, in dem sie angezeigt werden (standardmäßig). Wenn Sie also nicht schweben, die Anzeige ändern oder andere Eigenschaften festlegen, wird nach einem h*Tag IMMER eine neue Zeile angezeigt .

Tkone

@JackWilsdon Ben Lee wurde bereits aktualisiert, um zu zeigen, wie die vertikale Polsterung einfach beibehalten werden kann, sodass ich mich nach Ihrer Bearbeitung nicht mehr um mich kümmern muss.

Tkone

2

Ich habe dieses Problem gerade gelöst, indem ich den h1-Randwert im HTML-Stil auf minus gesetzt habe. Es funktioniert perfekt für meine Bedürfnisse.

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

Jacek
quelle

2

Dies funktioniert zum Entfernen der vertikalen Polsterung anstelle des Zeilenumbruchs.

Juni

-5

<style>
h1 {
    padding: 0px;
    margin: 0px;
}
</style>

Hamida Almangush
quelle

Zeilenumbruch nach <h1> -Tags entfernen?

Antworten: