¿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.

— Jack Wilsdon
fuente

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