Supprimer la nouvelle ligne après les balises <h1>?

92

J'ai un problème avec la suppression des sauts de ligne après la <h1>balise, car chaque fois qu'elle imprime, elle ajoute un saut de ligne juste après, donc quelque chose comme <h1>Hello World!</h1> <h2>Hello Again World!</h2>s'imprime comme ceci:

Hello World!

Hello Again World!

Je ne sais pas quelles balises je dois changer dans CSS, mais je pense que c'est quelque chose à voir avec le remplissage ou les marges

Je veux aussi garder le rembourrage vertical si possible.

— Jack Wilsdon
source

152

On dirait que vous voulez les formater en ligne. Par défaut, h1et h2sont des éléments de niveau bloc qui couvrent toute la largeur de la ligne. Vous pouvez les changer en ligne avec css comme ceci:

h1, h2 {
    display: inline;
}

Voici un article qui explique la différence entre blocket inlineplus en détail: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Pour maintenir le remplissage vertical, utilisez inline-block, comme ceci:

h1, h2 {
    display: inline-block;
}

— Ben Lee
source

9

<h1>les balises se sont {display: block}fixées. Ce sont des éléments de niveau bloc. Pour désactiver ceci:

{display: inline}

— tkone
source

par défaut les balises h utilisant la marge, le rembourrage, nous devons donc les supprimer

— Adeel Mughal

Je veux aussi garder le rembourrage vertical si possible, j'ai essayé display: inline ;, mais il n'a plus son rembourrage vertical.

— Jack Wilsdon

1

la suppression du remplissage et de la marge ne supprime pas la nouvelle ligne. la nouvelle ligne est causée car ce sont des éléments de niveau bloc, ce qui signifie qu'ils occupent tout l'espace horizontal où ils apparaissent (par défaut). Ainsi, à moins que vous ne fassiez des flottants, que vous changiez l'affichage ou certaines autres propriétés, vous aurez TOUJOURS une nouvelle ligne après une h*balise.

— tkone

@JackWilsdon Ben Lee a déjà mis à jour pour montrer comment maintenir facilement le remplissage vertical, donc je ne me soucierai pas d'un moi aussi après votre modification.

— tkone

2

Je viens de résoudre ce problème en définissant la valeur de la marge h1 sur moins dans la section de style html. Cela fonctionne parfaitement pour mes besoins.

<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
source

2

Cela fonctionne pour supprimer le remplissage vertical au lieu du saut de ligne.

— juil

-5

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

— Hamida Almangush
source