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


当前回答

在更一般的层面上回答任何登陆这里的人,因为他们正在修复由<br>标签引起的间距问题。为了接近完美像素,我不得不做很多重置。

br {
    content: " ";
    display: block;
}

对于我要解决的特定问题,我必须在字里行间留出特定的空间。我在顶部和底部加了边距。

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

其他回答

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

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

blockquote { margin-top: 20px }

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

可以在<p>元素上应用line-height,这样行就变大了。

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

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

但这在chrome或firefox上行不通。

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

我让它在IE7中工作通过使用解决方案的组合,但主要是包装在DIV中的Br奈杰尔和其他人建议。添加Id和运行在="服务器",所以我可以删除BR时,从复选框行删除复选框。

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}
<div class="narrow" run at="server"><br></br></div>

所以,上面的人基本上得到了类似的答案,但在这里它非常简洁。适用于Opera, Chrome, Safari和Firefox,最有可能也适用于IE ?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}