Удаление новой строки после тегов <h1>?

94

У меня возникла проблема с удалением <h1>разрывов строк после тега, так как каждый раз при печати он добавляет разрыв строки сразу после него, поэтому что-то вроде <h1>Hello World!</h1> <h2>Hello Again World!</h2>распечатывается следующим образом:

Hello World!

Hello Again World!

Я не уверен, какие теги мне нужно изменить в CSS, но я полагаю, что это как-то связано с отступом или полями.

Я также хочу сохранить вертикальное заполнение, если это вообще возможно.

html css header styles stylesheet Джек Уилсдон
источник

Ответы:

155

Похоже, вы хотите отформатировать их как встроенные. По умолчанию h1и h2являются элементами блочного уровня, охватывающими всю ширину линии. Вы можете изменить их на встроенные с помощью css следующим образом:

h1, h2 {
    display: inline;
}

Вот статья, в которой объясняется разница между blockи inlineболее подробно: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Чтобы сохранить вертикальное заполнение, используйте inline-block, например:

h1, h2 {
    display: inline-block;
}
Бен Ли
источник
9

<h1>теги {display: block}установили. Это элементы блочного уровня. Чтобы выключить это:

{display: inline}
tkone
источник
по умолчанию теги h с использованием полей и
отступов
Я также хочу сохранить вертикальное заполнение, если это вообще возможно, я пробовал display: inline;, но у него больше нет вертикального заполнения.
Джек Уилсдон,
1
удаление отступов и полей не приводит к удалению новой строки. новая строка вызвана тем, что они являются элементами блочного уровня, что означает, что они занимают все горизонтальное пространство, где они появляются (по умолчанию). Таким образом, если вы не выполняете float, не изменяете отображение или какие-либо другие свойства, у вас ВСЕГДА будет новая строка после h*тега.
tkone
@JackWilsdon Бен Ли уже обновился, чтобы показать, как легко поддерживать вертикальное заполнение, поэтому я не буду беспокоиться о себе после вашего редактирования.
tkone
3

Я просто решил эту проблему, установив значение поля h1 на минус в разделе стиля html. Он идеально подходит для моих нужд.

<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>
Яцек
источник
2
Это работает для удаления вертикального отступа вместо разрыва строки.
JUIL
Я искал не то в Google, но заметил, что это именно то, что я искал. Отличное решение, хотя и не ответ на вопрос. Спасибо, в любом случае! :)
Semmel
-5 

<style>
h1 {
    padding: 0px;
    margin: 0px;
}
</style>
Хамида Алмангуш
источник