br line-height в сафари и хром, оставляя зазор

Question

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

Например, для разрыва 5px я использую <br> с классом height5:

<br /><br class="height5" />

Аналогично, height2 и height10 и все, что существует для той же цели.

Классы CSS определены следующим образом:

br.height2 {line-height:2px;}
br.height5 {line-height:5px;}

Это работает в IE6 +, FF2 + и Opera, но по некоторым причинам в Safari и Chrome имеются огромные пробелы (как будто эти два браузера игнорируют его и просто применяют регулярные перерывы). Я пробовал тестировать с большими высотами линий, такими как 20px или 30px, и Safari и Chrome распознают их. Кажется, что они игнорируют что-либо под 5-10 пикселей.

Помощь? Спасибо!

Answer 1

Это работало в Chrome (атрибут content помог):

br {
  content: " ";
  display: block;
  margin: 1em;
}

Answer 2

Эти браузеры могут читать ваш пробел (возврат каретки и т. Д.) И открывать его с помощью значения типа & nbsp ;. Я предлагаю использовать несколько тегов div и стилизовать div с атрибутами margin-bottom нужного пространства.

<div style="margin-bottom: 2px">content</div>
<div style="margin-bottom: 5px">content</div>
<div>content</div>

Answer 3

Это сработало для меня и для Firefox, и для Chrome. Получил идею от @SamuelC и @ anushr.

br{ 
    display: block;
    line-height: 0.1; 
    content: " ";
}

Answer 4

Попробуйте это:

br { line-height: 1em; }

или

br { margin-top: 2em; }

Answer 5

Я знаю, что это старый, но мой ответ здесь кросс-браузер без превращения br в блок

/* line height can be set to whatever you want*/
br {line-height: 0.1; content: " "}