我有一段很大的文字，用分为多个子段落<br>：

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

我想扩大这些分段之间的距离，例如存在两个<br>或类似的东西。我知道正确的方法是使用<p></p>，但现在我无法更改此布局，因此我正在寻找仅CSS解决方案。

我试过设置<br>的line-height和height有display: block，我也一派，堆栈溢出-ED简单，但没有找到任何解决方案。在不更改布局的情况下是否有可能？

CSS：

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

该解决方案可能与跨浏览器不兼容，但至少是这样。还可以考虑设置line-height：

line-height:22px;

对于谷歌浏览器，请考虑设置content：

content: " ";

除此之外，我认为您还停留在JavaScript解决方案上。

这是实际上具有跨浏览器支持的正确解决方案：

  br {
        line-height: 150%;
     }

因此，上面的窥视现象基本上得到了类似的答案，但是在这里却非常简洁。可以在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 */
}

另一种方法是使用HR。但是，这是狡猾的部分，使其不可见。

从而：

<hr style="height:30pt; visibility:hidden;" />

要使用HR模拟更清晰的BR中断：Btw在所有浏览器中均可用！

{ height:2px; visibility:hidden; margin-bottom:-1px; }

据我所知，<br>不具有的高度，它只是强制断线。您所拥有的是除自动换行符外还有一些换行符的文本，而不是分段。您可以更改行距，但这会影响所有行。

我只是有这个问题，我通过使用解决了

<div style="line-height:150%;">
    <br>
</div>

您可以在该<p>元素上应用line-height ，因此线条会变大。

我之前没有尝试过:before/ :afterCSS2伪元素，主要是因为它仅在IE8 （与IE浏览器有关）中受支持。这可能是唯一可能的CSS解决方案：

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

下面是一个例子的怪异模式。

我认为您可能可以使用：

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

但这不适用于Chrome或Firefox。

只是以为我要提到的是，以防万一发生在其他任何人身上，我会为他们省去麻烦。

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

适用于Firefox，Chrome和Safari。尚未在资源管理器中进行测试。（Windows平板电脑已断电。）

换行符，字体大小在Firefox和Safari中的工作方式有所不同。

有趣的是，如果break标记以如下完整格式编写：

<br></br>

那么CSS line-height：145％就可以了。如果break标记写为：

<br> or 
<br/> 

那么它至少在Chrome，IE和firefox中不起作用。奇怪的！

对我有用的是在段落标记之间添加内联...虽然不是最好的解决方案。

<br style="line-height:32px">

--------编辑---------

我在PC / Mac上遇到了这个问题...它为文本提供了新的行高，但没有进行换行...您可能要自己做一些测试。抱歉!

并请记住，<hr>如在某处建议的那样使用标签，将会结束<p>标签，因此请不要理会该解决方案。
如果是 周围有样式的东西<p>，<hr>插入后，其余内容的样式消失了。

这是可在IE，Firefox和Chrome中使用的解决方案。想法是将br元素的字体大小从14px的主体大小增加到18px，并将元素减小4px，以便多余的大小在文本行下方。结果是br下方有4px的额外空白。

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

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:topIE和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

迈克尔和尤达都对。您可以做的是使用<p>标记，它是一个块标记，使用底边距来偏移以下块，因此您可以执行类似的操作来获得更大的间距：

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

另一种选择是使用块 <hr>标签，通过它您可以显式定义间距的高度。

<br />将占用您的文本填充行所占用的空间<p>，您无法更改。如果要更大，则意味着您要分成几段，因此添加other <p>。别忘了成为你能做到的最语义；）

您还可以在CSS中使用“ block-quote”属性。这样就不会影响您的每一行，而只允许您为段落或“块引号”之间的中断设置参数。

更新：
我站得住了。“ blockquote”实际上是一个html属性。您可以在工作中像<p>和</ p>一样使用它。然后，您可以像这样在CSS中设置块引用的参数

blockquote { margin-top: 20px }

希望这可以帮助。这类似于在br上设置参数，并且可能会或可能不会与跨浏览器兼容。

您似乎无法调节BR的高度，但可以使用display：none使其可靠地消失。

在寻找以下解决方案时浏览了此页面：

我遇到的情况是，第三方支付网关（Worldpay）仅允许您使用最多10k的CSS和HTML（不允许脚本）自定义其支付页面，这些页面已注入其模板主体中，并带有一些BR，FONT标签等。再加上强制IE7 / 8进入Quirks模式的DTD，这使得跨浏览器的自定义变得非常困难！

关闭BR会使事情变得更加一致...

我使用这些方法，但我不知道是否跨浏览器

=================方法1 ==================

br {
    display:none;
}

要么

=================方法2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

要么

=================方法3 ==================

br:after { content: "" }
br { content: "" }

尝试line-height在p包含br标记的标记上使用CSS 属性。记住，你id的p标签，如果你想将其隔离，但它可能会更好使用div隔离，IMO。

抱歉，如果其他人已经说了这一点，那么简单的解决方案是摆弄您的“行高”。如果使用换行符时占用的空间过多，那仅仅是因为您将行高设置得太高。您可以在CSS中更正此错误（但知道它将影响使用该属性的所有内容），也可以执行内联样式来覆盖CSS。

我必须开发一种解决方案以将HTML转换为PDF，并在表格单元格中垂直居中放置文本，但是除了输入纯文本之外，其他方法均无用 <br>

因此，在框外思考，我通过调整字体大小（以pt为单位）来更改垂直大小。

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

您必须在每个
元素上进行内联，但是它应可在大多数浏览器中使用Fiddle并以行高来获得所需的效果。如果在每个元素上都内联，则它应可在大多数浏览器和电子邮件中使用（但这太复杂了，无法在此处讨论）。

当我无法从span标签获取样式间距时，这为我解决了问题：

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

用 <div>

<div>Content 1</div>Content 2

这样就可以在没有任何垂直空间的情况下换行。

这变成

<div>Content 1</div>Content 2

对于在此处着陆的任何人进行更一般的回答，因为他们正在解决由<br>标签引起的间距问题。为了接近像素完美，我必须进行很多重置。

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

对于我要解决的特定问题，我必须在各行之间留出一定的空间。我在顶部和底部添加了边距。

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

我通过使用多种解决方案使它可以在IE7中工作，但主要是按照Nigel等人的建议将Br包装在DIV中。添加了ID并在=“ server”处运行，因此从复选框行中删除复选框时，我可以删除BR。

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

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

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

像这样只添加一个段落而不是换行符怎么样

bla la la bla bla bla abla la bla bla bla abla la bla bla bla a

然后，您可以为该p指定lineheight或padding或其他内容