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.

— Jack Wilsdon
fonte

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