在野生动物园和铬离开间隙的高度线

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

这些浏览器可能正在读取您的空白区域（回车等）并使用某种值来支持它。我建议使用多个div标签，并使用所需空间的margin-bottom属性设置div的样式。

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

Answer 3

我知道这已经过时了，但我的答案是跨浏览器而不会变成块

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

Answer 4

试试这个：

br { line-height: 1em; }

或：

br { margin-top: 2em; }

Answer 5

这适用于firefox和chrome。从@SamuelC和@anushr得到了这个想法。

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