¿Eliminar nueva línea después de las etiquetas <h1>?

94

Tengo un problema para eliminar los saltos de línea después de la <h1>etiqueta, ya que cada vez que se imprime, agrega un salto de línea inmediatamente después, por lo que se <h1>Hello World!</h1> <h2>Hello Again World!</h2>imprime algo como esto:

Hello World!

Hello Again World!

No estoy seguro de qué etiquetas necesito cambiar en CSS, pero espero que tenga algo que ver con el relleno o los márgenes

También quiero mantener el acolchado vertical si es posible.

html css header styles stylesheet Jack Wilsdon
fuente

Respuestas:

155

Parece que desea formatearlos como en línea. De forma predeterminada, h1y h2son elementos a nivel de bloque que abarcan todo el ancho de la línea. Puede cambiarlos a en línea con CSS de esta manera:

h1, h2 {
    display: inline;
}

Aquí hay un artículo que explica la diferencia entre blocky inlinecon más detalle: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Para mantener el acolchado vertical, use inline-block, así:

h1, h2 {
    display: inline-block;
}
Ben Lee
fuente
9

<h1>las etiquetas se han {display: block}establecido. Son elementos a nivel de bloque. Para apagar esto:

{display: inline}
tkone
fuente
por defecto, las etiquetas h usan margen, relleno, por lo que tenemos que eliminarlas
Adeel Mughal
También quiero mantener el relleno vertical si es posible, probé display: inline ;, pero ya no tiene su relleno vertical.
Jack Wilsdon
1
eliminar el relleno y el margen no elimina la nueva línea. la nueva línea se debe a que son elementos a nivel de bloque, lo que significa que ocupan todo el espacio horizontal donde aparecen (por defecto). Por lo tanto, a menos que haga flotantes, cambie la visualización o algunas otras propiedades, SIEMPRE tendrá una nueva línea después de una h*etiqueta.
tkone
@JackWilsdon Ben Lee ya se ha actualizado para mostrar cómo mantener el relleno vertical fácilmente, por lo que no me molestaré en mí también después de su edición.
tkone
3

Acabo de resolver este problema estableciendo el valor del margen h1 en menos en la sección de estilo html. Funciona perfectamente para mis necesidades.

<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
fuente
2
Esto funciona para eliminar el relleno vertical en lugar del salto de línea.
juil
Busqué en Google lo incorrecto mientras noté que esta respuesta es en realidad lo que estaba buscando. Gran solución, aunque no es la respuesta a la pregunta. ¡Gracias de cualquier manera! :)
Semmel
-5 

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