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


当前回答

当我无法从span标签中获得样式间距时,这为我做了一件事:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

其他回答

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

Css:

br {
   display: block;
   margin: 10px 0;
}

解决方案可能不跨浏览器兼容,但至少是可以的。还可以考虑设置行高:

line-height:22px;

对于谷歌Chrome浏览器,考虑设置内容:

content: " ";

除此之外,我认为您只能使用JavaScript解决方案了。

2019年9月13日更新:

我使用<br class=big>来做一个超大的换行符,当我需要一个。直到今天,我都是这样写的:

br.big {line-height:190%;vertical-align:top}

(vertical-align:top只在IE和Edge中需要。)

这在我试过的所有主要浏览器中都有效:Chrome、Firefox、Opera、Brave、PaleMoon、Edge和IE11。

然而,它最近在基于chrome的浏览器中停止工作:我的“大”换行符变成了正常大小的换行符。

(我不知道他们是什么时候打破的。截至2019年9月12日,它仍然可以在我过时的Chromium Portable 55.0.2883.11中工作,但它在Opera 63.0.3368.71和Chrome 76.0.3809.132 (Windows和Android)中被打破了。

经过一些尝试和错误,我最终用下面的替代品,它可以在所有这些浏览器的当前版本中工作:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

注:

line-height:190%适用于所有浏览器,除了最新版本的基于chrome的浏览器。

vertical-align:top是IE和Edge所需要的(结合line-height:190%),以获得额外的空间在前一行之后,在它属于的地方,而不是部分在前部分在后。

display:block;content:"";margin-top:0.5em适用于Chrome、Opera和Firefox,但不适用于Edge和IE。

另一种(更简单的)方法是在<br>标记之后添加一些额外的垂直空间,如果您不介意编辑HTML,可以使用类似这样的方法。它在所有浏览器中都能正常工作:

<span style="vertical-align:-37%"> </span><br>

(当然,您可以根据需要调整“-37%”,以增大或减小差距。)下面是一个演示页面,其中包括主题的一些其他变体:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



2020年5月28日:

我已经更新了演示页面;它现在演示了上述所有技术:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

<br>为换行符。 <br />也是换行符,void元素或xhtml可以选择使用“/”。 使用<br></br>,浏览器将插入两个换行符,因为这两个换行符“实际上”相同。 没有办法增加换行符的大小,因为它只是一个换行符。 使用一个div,能见度设置为隐藏(<div style="能见度:隐藏;行高:150%;"</div>)或者更好,一个段落。

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

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

下面是QuirksMode上的一个例子。