Как отрегулировать объем пространства между двумя строками в каждом из CSS?

У меня есть такой документ:

This is some text.<br>
This is some more text.<br>
This is yet some more text.

Это выглядит следующим образом:

This is some text.
This is some more text.
This is yet some more text.

Есть ли способ отрегулировать пространство между строками, но только там, где отображается  ? Результат может выглядеть так:

This is some text.

This is some more text.

This is yet some more text.

Это не то же самое, что и двойное пространство, так как длинные строки на странице не будут отображаться с дополнительным пространством.

Как я могу отрегулировать объем пространства между строками, где отображается  ?

Ответ 1

Можно нацелить тег   на CSS, но он не будет очень совместим с кросс-браузером, и это просто не очень хорошая идея, потому что любой, кто смотрит на ваш код, предположит, что у вас нет ни малейшего подумайте, что вы делаете, потому что для достижения вашей цели, безусловно, есть более подходящие методы.

br {}

  на нем не имеет значения по умолчанию. Если у вас есть HTML-страница, содержащая только  , у вас есть пустая страница. Стиль тега   будет

<!-- HTML -->
<br/>

Страница будет иметь этот стиль

height: auto;
line-height: normal;
max-height: none;
min-height: 0px;

Высота этого тега   наследуется от стиля его родительского контейнера. Таким образом, если он вложен в абзац;   будет равно высоте одной строки текста на основе высоты строки и размера шрифта этого абзаца.

<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>

Теперь у меня есть пустая страница, но страница имеет 10 пикселей, потому что я указал, что абзац должен быть 10 пикселей, и хотя абзац по существу пуст, он не пуст, потому что у меня есть перерыв. Таким образом, разрыв эквивалентен высоте 1 строки текста.

Существующие свойства и значения CSS1 не могут описывать поведение элемент BR. В HTML элемент BR указывает на разрыв строки между словами. По сути, элемент заменяется на разрыв строки. Будущие версии CSS могут обрабатывать добавленный и замененный контент, но Форматировщики на основе CSS1 должны относиться к BR специально. - Каскадные таблицы стилей, уровень 1, раздел 4.6: элементы "BR"

Соответствующим решением было бы разделить верхний и нижний блок на два контейнера () и установить границу между двумя блоками. Если вы используете тег , вы можете создать пространство между абзацами, не добавляя ненужное пространство в верхний абзац, как это.

// CSS
p + p { margin-top:10px } // for every paragraph that preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.

Или просто отрегулируйте высоту строки текста, если вы не возражаете, чтобы пространство между каждой другой линией также увеличивалось

Вы также можете найти полезный псевдо-селектор:: first-line.

Хотя я не могу понять, почему; Я действительно верю в то, что временами всегда могут быть веские причины нарушать правила. Если вы абсолютно положительно настроились на стиль  , заверните его в контейнер и установите высоту строки контейнера.

<div style="line-height:50px;"><br></div>

Ответ 1

Ответ 2