Br line-height в сафари и хром, оставляя пробел

В моем HTML у меня есть div и внутри div у меня разный вертикальный интервал между строками текста. Я достигаю этого, используя разрывы и определяя высоту, т.е. <br /><br class="height5" /> или height2 или height10 или что-то еще.

В моей таблице стилей я определяю его как:

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

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

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

Ответ 1

Это работало на Chrome (атрибут content сделал трюк):

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Попробуйте следующее:

br { line-height: 1em; }

или

br { margin-top: 2em; }

Ответ 5

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

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