Remover a nova linha após as tags <h1>?

92

Estou tendo problemas para remover quebras de linha após o <h1> tag, pois toda vez que ele imprime, ele adiciona uma quebra de linha logo depois, então algo como <h1>Hello World!</h1> <h2>Hello Again World!</h2>imprime assim:

Hello World!

Hello Again World!

Não tenho certeza de quais tags preciso alterar no CSS, mas espero que tenha algo a ver com o preenchimento ou as margens

Também quero manter o preenchimento vertical, se possível.

html css header styles stylesheet Jack Wilsdon
fonte

Respostas:

152

Parece que você deseja formatá-los como embutidos. Por padrão, h1e h2são elementos de nível de bloco que abrangem toda a largura da linha. Você pode alterá-los para inline com css como este:

h1, h2 {
    display: inline;
}

Aqui está um artigo que explica a diferença entre blocke inlinecom mais detalhes: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Para manter o preenchimento vertical, use inline-block, assim:

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

<h1>tags foram {display: block}definidas. Eles são elementos de nível de bloco. Para desligar:

{display: inline}
tkone
fonte
por padrão h tags usando margin, padding, então temos que removê-los
Adeel Mughal
Também quero manter o preenchimento vertical, se possível. Tentei display: inline ;, mas ele não tem mais o preenchimento vertical.
Jack Wilsdon de
1
a remoção do preenchimento e da margem não remove a nova linha. a nova linha é causada por serem elementos de nível de bloco, o que significa que ocupam todo o espaço horizontal onde aparecem (por padrão). Portanto, a menos que você faça floats, altere a exibição ou algumas outras propriedades, você SEMPRE terá uma nova linha após uma h*tag.
dia
@JackWilsdon Ben Lee já atualizou para mostrar como manter o preenchimento vertical facilmente, então não vou me incomodar também depois de sua edição.
dia
2

Acabei de resolver esse problema definindo o valor da margem h1 para menos na seção de estilo html. Funciona perfeitamente para minhas necessidades.

<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
Isso funciona para remover o preenchimento vertical em vez da quebra de linha.
julho
-5 

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