我有一大段的文本,分为<br>的子段落:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

我想扩大这些分段之间的间隔,比如有两个<br>之类的。我知道这样做的正确方法是使用<p></p>,但现在我不能改变这个布局,所以我正在寻找css的解决方案。

我试着用display: block设置<br>的行高和高度,我也谷歌了一下,堆栈溢出了,但没有找到任何解决方案。在不改变布局的情况下,这可能吗?


当前回答

我知道这是一个老问题,但对我来说,它实际上是通过使用空白段落和页边距来实现的:

<p class="" style="margin: 4px;"></p>

增加或减少边距大小将增加或减少元素之间的距离,就像边框一样,但可以调整。

最重要的是,它是浏览器兼容的。

其他回答

下面是一个在IE、Firefox和Chrome中都能运行的解决方案。其思想是将br元素的字体大小从14px增加到18px,并将元素降低4px,以便额外的大小在文本行以下。结果是br下面有4px的额外空白。

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

据我所知<br>没有高度,它只是强制换行。你得到的是一个文本,除了自动换行之外,还有一些换行符,而不是段落。您可以更改行间距,但这将影响所有行。

我有个想法也许能派上用场

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

但这在chrome或firefox上行不通。

我只是觉得我应该提一下以防别人也这么想这样他们就不用麻烦了。

使用一些HTML在markdown,不得不强制<br>s在一个列表,导致太狭窄,没有一个给定的解决方案工作如预期(至少在我的设置)

最后是

<div style="height:10px;font-size:10px;">&nbsp;</div>

我在这里找到了,非常接近dorogz的建议。当然,对于标准的需要,CSS是更好的

有趣的是,如果将break标记写成完整形式,如下所示:

<br></br>

那么CSS行高:145%就可以了。 如果break标记写为:

<br> or 
<br/> 

那么它就不能工作了,至少在Chrome、IE和firefox中是这样。 奇怪!