Как изменить высоту <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

Css:

br {
   display: block;
   margin: 10px 0;
}

Решение, вероятно, не совместимо с разными браузерами, но это как минимум. Также рассмотрите установку line-height:

line-height:22px;

Для Google Chrome рассмотрим настройку content:

content: " ";

Кроме этого, я думаю, что вы застряли с решением JavaScript.

Answer 2

Вот правильное решение, которое на самом деле имеет кросс-браузерную поддержку:

  br {
        line-height: 150%;
     }

Answer 3

Другой способ - использовать HR . Но, и вот хитрая часть, сделайте его невидимым.

Таким образом:

<hr style="height:30pt; visibility:hidden;" />

Чтобы сделать более чистый разрыв BR, смоделированный с помощью HR: Btw работает во всех браузерах !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Answer 4

Итак, взгляды выше имеют в основном аналогичный ответ, но здесь он очень лаконичен. Работает в Opera, Chrome, Safari & Firefox, скорее всего IE тоже?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Answer 5

Насколько я знаю, <br> не имеет высоту, это просто вызывает разрыв строки. У вас есть текст с некоторыми переносами строк в дополнение к автоматическим переносам, не подпунктам. Вы можете изменить межстрочный интервал, но это повлияет на все строки.

Answer 6

У меня просто была эта проблема, и я справился с ней, используя

<div style="line-height:150%;">
    <br>
</div>

Answer 7

Вы можете применить высоту строки к этому элементу <p>, чтобы линии стали больше.

Answer 8

Я не пробовал псевдоэлемент :before / :after CSS2 прежде, в основном потому, что он поддерживается только в IE8 (это касается браузеров IE) . Это может быть единственно возможным решением CSS:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Вот пример на QuirksMode .

Answer 9

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

<br></br>

тогда CSS-line-height: 145% работает. Если тег разрыва записывается как:

<br> or 
<br/> 

тогда это не работает, по крайней мере, в Chrome, IE и Firefox. Weird!

Answer 10

Вот решение, которое работает в IE, Firefox и Chrome. Идея состоит в том, чтобы увеличить размер шрифта элемента br с размера тела от 14 до 18 пикселей и уменьшить элемент на 4 пикселя, чтобы дополнительный размер находился ниже текстовой строки. Результатом является 4px дополнительного пробела ниже br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}