如何改变一个<br>高度?

我有一段很大的文本，它被分成了<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>的line-height和height，我也简单地谷歌和堆栈溢出，但没有找到任何解决方案。在不改变布局的情况下，这可能吗?

730892 次浏览
小开

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

小开

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

小开

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

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

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

小开

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

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

blockquote { margin-top: 20px }

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

小开
最佳答案

Css:

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

解决方案可能不跨浏览器兼容，但至少是可以的。也可以考虑设置line-height:

line-height:22px;

对于谷歌Chrome浏览器，考虑设置content:

content: " ";

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

小开

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

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

这是QuirksMode上的例子。

小开

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

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

但这在chrome或firefox上行不通。

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

小开

另一种方法是使用人力资源。但是，狡猾的是，让它隐形。

因此:

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

使用HR来模拟一个更干净的BR中断:Btw适用于所有浏览器!!

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

你似乎不能调整BR的高度，但你可以让它可靠地消失使用显示:无

在寻找以下问题的解决方案时遇到了这个页面:

我有一种情况，第三方支付网关(Worldpay)只允许你自定义他们的支付页面，最多有10k的CSS和HTML(不允许脚本)，被注入到他们的模板主体中，然后在一些BR, FONT标签等。 再加上他们的DTD迫使IE7/8进入Quirks模式，这使得跨浏览器定制变得非常困难!< / p >

关闭BR会让事情变得更加一致……

小开

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

<br></br>

则CSS line-height:145%工作。 如果break标记被写为:

<br> or
<br/>

那么它就不能工作，至少在Chrome, IE和firefox中。 奇怪!< / p >

小开

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

小开

下面是其实< em > < / em >具有跨浏览器支持的正确解决方案:

  br {
line-height: 150%;
}
小开

我有个问题，我用了

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

<br>是换行符。
<br />也是换行符，“/”可选用于void元素或xhtml。
使用<br></br>，浏览器将插入两个换行符，因为两者“实际上”相同。
没有办法增加换行符的大小，因为它只是一个换行符。
使用一个div，将visibility设置为hidden (<div style="vilibility:hidden; line-height:150%;"</div>)，或者更好的是使用一个段落

小开

对我来说有用的是在段落标签之间添加这个内联…但这并不是最好的解决方案。

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

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

我在PC/Mac上遇到了问题…它赋予文本新的行高，但不做换行…你可能想自己做一些检查。对不起!

小开

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

方法一======

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;
}
<标题>或 ======方法三====== .使用实例 
br:after { content: "" }
br { content: "" }
小开
并且记住，(mis)按照建议在某处使用<hr>标记，将结束<p>标记，所以忘记这个解决方案。
如果f.ex。如果在<p>周围设置了样式，则在插入<hr>之后，其余内容的样式将消失
小开

可能会发现一个解决方案很容易，你只需要创建不同类型的
。似乎对我有用。

< p >的例子: (html代码)< / p > 
<br/ class="150%space">

(css代码)

br[class='150%space']
{
line-height: 150%;
}
小开 
<span style="line-height:40px;"><br></span>
你必须在内联和每个
元素上这样做，但它应该在大多数浏览器上工作 调整线高以获得想要的效果。如果您在每个元素上都使其内联，那么它应该可以跨大多数浏览器和电子邮件工作(但这太复杂了，在这里不讨论)
小开

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

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

下面是一个在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}

(只有IE和Edge才需要vertical-align:top。)

这在我试过的所有主要浏览器中都有效: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的浏览器的最新版本。

IE和Edge需要vertical-align:top(与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

& # xFEFF; < br >

2020年5月28日:

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

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

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

适用于Firefox, Chrome &Safari。 还没有在Explorer中测试。(Windows-tablet is out of power.)

.

换行，字体大小在Firefox &Safari。

小开

所以，上面的人基本上得到了类似的答案，但在这里它非常简洁。在Opera, Chrome, Safari &火狐，很可能还有IE ?

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

如果有人已经说过了，我很抱歉，但简单的解决方法是玩转你的“行高”。如果你在使用换行符时占用了太多的空间，这只是因为你把行高设置得太高了。你可以在CSS中纠正这个错误(但知道这会影响所有使用该属性的东西)，或者你可以使用内联样式来覆盖CSS。

小开

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

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

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

我必须开发一个解决方案，将HTML转换为PDF，并在表格单元格中垂直集中文本，但除了输入普通的<br>之外，没有任何工作

因此，跳出框框，我通过调整字体大小(以pt为单位)改变了垂直大小。

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

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

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>
小开

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

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦a

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦a

然后你可以为p指定线高或填充

小开

而不是

<br>,<br/>,<hr> or <span></span> and trying different CSS properties to these tag.

我做到了，我把段落放在一个div中，并给它行高:2 px

# html

<div class="smallerlineHeight">
<p>Line1</p>
<p>Line2</p>
</div>

# css

.smallerlineHeight {
p {
line-height: 2px;
}
}
小开

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

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

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

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

小开

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

最后是

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

我发现它在这里，非常接近dorogz的建议。当然，对于标准的需要，CSS是更好的


提交答案