Как изменить высоту <br>?

Question

У меня большой абзац текста, который разделен на подпункты с <br> s:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

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

Я попытался установить <br> line-height и height с display: block, я также ненадолго погуглил и переполнял стек, но не нашел решения. Возможно ли это даже без изменения макета?

Answer 1

Мне пришлось разработать решение для преобразования HTML в PDF и вертикального центрирования текста в ячейках таблицы, но ничего не получалось, кроме ввода простого <br>

Итак, не задумываясь, я изменил размер по вертикали, настроив размер шрифта (в пт).

<font style="font-size: 4pt"><br></font>

Answer 2

Извините, если кто-то уже сказал это, но простое решение - поиграть с вашей "высотой строки". Если вы используете слишком много места, когда используете разрыв строки, это просто потому, что у вас слишком высокая высота строки. Вы можете исправить это в CSS (но знайте, что это повлияет на все, что использует это свойство), или вы можете использовать встроенный стиль для переопределения CSS.

Answer 3

Использование <div>

<div>Content 1</div>Content 2

Это позволяет новую строку без вертикального пробела.

Это становится

<div>Content 1</div>Content 2

Answer 4

Как насчет простого добавления абзаца вместо разрыва строки следующим образом

бла-ла-бла-бла-абла-ла-бла-бла-абла-ла-бла-бла-бла

бла-ла-бла-бла-блаа-ля-бла-бла-а-ля-ла-бла-бла

бла-ла-бла-бла бла-а-ля-бла-бла а-ля-ла-бла бла а

Затем вы можете указать высоту строкиили дополнения или что-то для этого р

Answer 5

Возможно использование двух тегов br - самое простое решение, которое работает со всеми браузерами. Но это повторяется.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Answer 6

Я заставил его работать в IE7, используя комбинацию решений, но в основном обернул Br в DIV, как предлагали Найджел и другие. Добавлены Id и run at = "server", чтобы я мог удалить BR при удалении флажка из ряда флажков.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Answer 7

Ответы на более общем уровне для всех, кто приземлился здесь, поскольку они исправляют проблемы с пробелами, вызванные тегом <br>. Я должен сделать много перезагрузок, чтобы получить почти идеальный пиксель.

br {
    content: " ";
    display: block;
}

Для конкретной проблемы, которую я решал, у меня должен был быть определенный интервал между строками. Я добавил поле сверху и снизу.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Answer 8

<br> для разрыва строки.
<br /> также относится к разрыву строки, «/» необязательно необходимо для пустых элементов или для xhtml.
Используя <br></br>, браузеры вставляют два переноса строк, так как оба «практически» одинаковы.
Невозможно увеличить размер разрыва строки, потому что это просто разрыв строки.
Используйте div с установленной скрываемостью (<div style="vilibility:hidden; line-height:150%;"</div>) или, что еще лучше, абзацем.

Answer 9

Возможно, очень легко найти решение, которое вам нужно только для создания другого типа
. Кажется, у меня сработало.

пример: (HTML-код)

<br/ class="150%space">

(код CSS)

br[class='150%space']
{
   line-height: 150%;
}

Answer 10

Если цель состоит в том, чтобы добавить немного дополнительного вертикального пространства после тега <br>, не нарушая логический абзац, что-то вроде этого поможет. Работает нормально во всех браузерах:

<span style="vertical-align:-37%"> </span><br>

Вот демонстрационная страница, которая включает в себя некоторые другие варианты темы:

http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html