在我的HTML中我有一个<div>
,在<div>
内我需要不同的文本行之间的垂直间距。我通过使用<br />
元素和CSS类来实现这一点,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像素以下的任何东西。
救命?谢谢!
这适用于Chrome(content
属性可行):
br {
content: " ";
display: block;
margin: 1em;
}
这些浏览器可能正在读取您的空白区域(回车等)并使用某种值来支持它。我建议使用多个div标签,并使用所需空间的margin-bottom属性设置div的样式。
<div style="margin-bottom: 2px">content</div>
<div style="margin-bottom: 5px">content</div>
<div>content</div>
我知道这是旧的,但我在这里的答案是跨浏览器而不会变成块
/* line height can be set to whatever you want*/
br {line-height: 0.1; content: " "}
试试这个:
br { line-height: 1em; }
要么:
br { margin-top: 2em; }
这适用于我的firefox和chrome。从@SamuelC和@anushr那里得到了这个想法。
br{
display: block;
line-height: 0.1;
content: " ";
}