Html 如何更改 <br> 的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1409649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the height of a <br>?
提问by n1313
I have a big paragraph of text that is divided into subparagraphs with <br>'s:
我有一大段文字，被分成几个小段<br>：
<p>
Blah blah blah.
<br/>
Blah blah blah. Blah blah blah. Blah blah blah.
<br/>
Blah blah blah.
</p>
I want to widen the gap between these subparagraphs, like there is two <br>'s or something like that. I know that the right way to do this is to use <p></p>, but right now I cannot change this layout, so I am looking for CSS-only solution.
我想扩大这些分段之间的差距，比如有两个<br>或类似的东西。我知道这样做的正确方法是使用<p></p>，但现在我无法更改此布局，因此我正在寻找仅使用 CSS 的解决方案。
I've tried setting <br>'s line-heightand heightwith display: block, I also Googled and Stack Overflow-ed briefly, but did not find any solution. Is this even possible without changing the layout?
我试过设置<br>'sline-height和heightwith display: block，我也用谷歌和 Stack Overflow 简单地搜索过，但没有找到任何解决方案。这甚至可能不改变布局吗？
回答by Duroth
Css:
css：
br {
display: block;
margin: 10px 0;
}
The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:
该解决方案可能不是跨浏览器兼容的，但至少是这样。还要考虑设置line-height：
line-height:22px;
For Google Chrome, considersetting content:
对于 Google Chrome，请考虑设置content：
content: " ";
Other than that, I think you're stuck with a JavaScript solution.
除此之外，我认为您坚持使用 JavaScript 解决方案。
回答by htmldrum
Here is the correct solution that actuallyhas cross-browser support:
这是实际具有跨浏览器支持的正确解决方案：
br {
line-height: 150%;
}
回答by Isaac Minogue
So, peeps above have got basically a similar answer, but here it is very succinctly. Works in Opera, Chrome, Safari & Firefox, most likely IE too?
所以，上面的窥视者基本上得到了类似的答案，但这里非常简洁。适用于 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 */
}
回答by Simon Smith
Another way is to use an HR. But, and here's the cunning part, make it invisible.
另一种方法是使用HR。但是，这里是狡猾的部分，让它不可见。
Thus:
因此：
<hr style="height:30pt; visibility:hidden;" />
To make a cleaner BR break simulated using the HR: Btw works in all browsers!!
要使用 HR 模拟更清晰的 BR 中断：顺便说一句，适用于所有浏览器！！
{ height:2px; visibility:hidden; margin-bottom:-1px; }
回答by Michael Borgwardt
As far as I know <br>does not havea height, it merely forces a line break. What you have is a text with some line breaks in addition to the auto-wrap ones, notsubparagraphs. You can change the line spacing, but that will affect all lines.
据我所知，<br>不具有的高度，它只是强制断线。除了自动换行之外，您拥有的是带有一些换行符的文本，而不是分段。您可以更改行间距，但这会影响所有行。
回答by nigel
I just had this problem, and I got around it by using
我刚刚遇到了这个问题，我通过使用解决了它
<div style="line-height:150%;">
<br>
</div>
回答by yoda
you can apply line-height on that <p>element, so lines become larger.
您可以在该<p>元素上应用 line-height ，因此线条变大。
回答by Filip Dupanovi?
I haven't tried the :before/:afterCSS2 pseudo-element before, mainly because it's only supported in IE8 (this concerning IE browsers). This could be the only possible CSS solution:
我之前没有尝试过:before/ :afterCSS2 伪元素，主要是因为它仅在 IE8 中受支持（这与 IE 浏览器有关）。这可能是唯一可能的 CSS 解决方案：
br:before {
display: block;
margin-top: 10px;
content: "";
}
Here is an exampleon QuirksMode.
这是一个关于QuirksMode的例子。
回答by Sam Lowry
I had a thought that you might be able to use:
我有一个想法，您可能可以使用：
br:after {
content: ".";
visibility: hidden;
display: block;
}
But that didn't work on chrome or firefox.
但这在 chrome 或 firefox 上不起作用。
Just thought I'd mention that in case it occurred to anyone else and I'd save them the trouble.
只是想我会提到，以防其他人发生这种情况，我会为他们省去麻烦。
回答by DeFliGra
br {
content: "";
margin: 2em;
display: block;
margin-bottom: -20px;
}
Works in Firefox, Chrome & Safari. Haven't tested in Explorer. (Windows-tablet is out of power.)
适用于 Firefox、Chrome 和 Safari。尚未在资源管理器中测试。（Windows 平板电脑没电了。）
Line-breaks, font-size works differently in Firefox & Safari.
换行符、字体大小在 Firefox 和 Safari 中的工作方式不同。
