Видалення нового рядка після тегів <h1>?

93

У мене проблема з видаленням розривів рядків після <h1>тегу, оскільки кожного разу, коли він друкується, він додає розрив рядка відразу після нього, тому щось на зразок <h1>Hello World!</h1> <h2>Hello Again World!</h2>друкується так:

Hello World!

Hello Again World!

Я не впевнений у тому, які теги мені потрібно змінити в CSS, але я сподіваюся, це щось пов’язане з заповненням або полями

Я також хочу зберегти вертикальну прокладку, якщо це можливо.

— Джек Вілсдон
джерело

154

Здається, ви хочете відформатувати їх як вбудовані. За замовчуванням 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 з використанням поля, відступів, тому ми повинні їх видалити

— Adeel Mughal

Я також хочу зберегти вертикальне заповнення, якщо це можливо, я спробував display: inline ;, але у нього більше немає вертикального заповнення.

— Джек Вілсдон,

1

видалення відступів та полів не призводить до видалення нового рядка. новий рядок спричинений тим, що вони є елементами рівня блоку, що означає, що вони займають весь горизонтальний простір там, де вони з'являються (за замовчуванням). Таким чином, якщо ви не виконуєте плаваючі операції, не змінюєте дисплей або деякі інші властивості, ви ЗАВЖДИ будете мати новий рядок після 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

Це працює для видалення вертикального заповнення замість розриву рядка.

— липень

Я погуглив за неправильну річ, поки помітив, що ця відповідь насправді є тим, що я шукав. Чудове рішення, хоча і не відповідь на питання. Все одно, дякую! :)

— Semmel

-5

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

— Хаміда Альмангуш
джерело