我有一大段的文本,分为<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>的行高和高度,我也谷歌了一下,堆栈溢出了,但没有找到任何解决方案。在不改变布局的情况下,这可能吗?


当前回答

我以前没有尝试过:before/:after CSS2伪元素,主要是因为它只在IE8中被支持(这涉及到IE浏览器)。这可能是唯一可能的CSS解决方案:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

下面是QuirksMode上的一个例子。

其他回答

可能使用两个br标签是适用于所有浏览器的最简单的解决方案。但这是重复的。

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

尝试在包含br标记的p标记上使用CSS line-height属性。记住,如果你想隔离它,你可以标识你的p标签,尽管在我看来,使用div隔离可能更好。

你也可以在CSS中使用“block-quote”属性。这样一来,它就不会影响到你的每一行,而是允许你为段落之间的换行符或“块引号”设置参数。

更新: 我接受纠正。"blockquote"实际上是一个HTML属性。你在工作中使用它就像< p >和< /p >一样。然后,您可以在css中设置块引号的参数,如

blockquote { margin-top: 20px }

希望这能有所帮助。它类似于在br上设置参数,并且可能与跨浏览器兼容,也可能不兼容。

迈克尔和尤达都是对的。你能做的是使用<p>标签,它是一个块标签,使用底部边距来抵消下面的块,所以你可以做类似的事情来获得更大的间距:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

另一种替代方法是使用block <hr>标记,使用该标记可以显式地定义间距的高度。

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

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

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

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