Rimuovere la nuova riga dopo i tag <h1>?

94

Ho un problema con la rimozione delle interruzioni di <h1>riga dopo il tag, poiché ogni volta che viene stampato, aggiunge un'interruzione di riga subito dopo, quindi qualcosa come viene <h1>Hello World!</h1> <h2>Hello Again World!</h2>stampato in questo modo:

Hello World!

Hello Again World!

Non sono sicuro di quali tag devo modificare in CSS, ma mi aspetto che abbia qualcosa a che fare con il riempimento o i margini

Voglio anche mantenere l'imbottitura verticale, se possibile.

— Jack Wilsdon
fonte

155

Sembra che tu voglia formattarli come in linea. Per impostazione predefinita, h1e h2sono elementi a livello di blocco che coprono l'intera larghezza della linea. Puoi cambiarli in linea con CSS in questo modo:

h1, h2 {
    display: inline;
}

Ecco un articolo che spiega la differenza tra blocke inlinein modo più dettagliato: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Per mantenere l'imbottitura verticale, usa inline-block, in questo modo:

h1, h2 {
    display: inline-block;
}

— Ben Lee
fonte

9

<h1>tag sono stati {display: block}impostati. Sono elementi a livello di blocco. Per disattivarlo:

{display: inline}

— tkone
fonte

per impostazione predefinita, i tag h utilizzano margin, padding, quindi dobbiamo rimuoverli

— Adeel Mughal,

Voglio anche mantenere il riempimento verticale, se possibile, ho provato display: inline ;, ma non ha più il riempimento verticale.

— Jack Wilsdon

1

la rimozione di riempimento e margine non rimuove la nuova riga. la nuova linea è causata perché sono elementi a livello di blocco, il che significa che occupano tutto lo spazio orizzontale in cui appaiono (per impostazione predefinita). Quindi, a meno che tu non effettui i float, cambi la visualizzazione o qualche altra proprietà, avrai SEMPRE una nuova riga dopo un h*tag.

— tkone

@JackWilsdon Ben Lee ha già aggiornato per mostrare come mantenere facilmente il riempimento verticale, quindi non mi preoccuperò anche di me dopo la tua modifica.

— tkone

3

Ho appena risolto questo problema impostando il valore del margine h1 su meno nella sezione stile html. Funziona perfettamente per le mie esigenze.

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

2

Funziona per rimuovere il riempimento verticale invece dell'interruzione di riga.

— juil

Ho cercato su Google la cosa sbagliata mentre ho notato che questa risposta è in realtà ciò che stavo cercando. Ottima soluzione, anche se non la risposta alla domanda. Grazie comunque! :)

— Semmel,

-5

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

— Hamida Almangush
fonte