我在这里看到question大致相同，但我无法得到任何答案（至少在Chrome上）。
这个问题仅适用于<br>，我知道很多其他技术可以改变高度，但在这种情况下我无法更改html 。
bla<BR><BR>bla<BR>bla<BR><BR>bla
的CSS：
br {
display: block;
margin-bottom: 2px;
font-size:2px;
line-height: 2px;
}
期望的效果：较小的线间高度。
我唯一可以开始工作的是display:none，但随后所有换行都被删除了。
这是使用某些技术的fiddle for it，但看到它与没有任何css的情况完全相同。
答案 0 :(得分：52)
您无法更改br标记本身的高度，因为它不是占用页面空间的元素。这只是创建新行的一条指令。
您可以使用line-height样式更改线条高度。这将改变您用空行分隔的文本块之间的距离，但也会改变文本块中行之间的距离。
为了完整性：HTML中的文本块通常使用文本块周围的p标记来完成。这样，您就可以控制p标记内的行高，以及p标记之间的行距。
答案 1 :(得分：29)
这感觉非常hacky，但在ubuntu的chrome 41中，我可以制作一个<br>稍微有点样式：
br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
}
我用字体大小控制间距。
答案 2 :(得分：12)
看看line-height property。尝试设置<br>标记的样式不是答案。
示例：
<p id="single-spaced">
This<br>
text<br>
is<br>
single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
This<br>
text<br>
is<br>
double-spaced.
</p>
答案 3 :(得分：7)
通过设置br标记的font-size，br标记的行高可以与段落文本中其余文本的行高不同。
示例：br { font-size: 200%; }
答案 4 :(得分：3)
如果你把它放在一个身高限制的div里面，你可以控制<br>身高。尝试：
<div style="height:2px;"><br></div>
答案 5 :(得分：3)
使用内容属性并设置内容的样式。然后使用伪元素调整内容行为。 Pseudo elements :: before和::之后在Mac Safari 10.0.3中工作。
此处元素 br 内容用作元素 br :: after 内容的元素锚点。元素 br 是可以设置br间距的地方。 br :: after 之后是可以显示和设置内容的br ::之后的地方。看起来很漂亮，但不是2px＆lt; br＆gt;。
br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
忽略 br 元素line-height属性。如果将负值应用于其中一个或两个选择器，以便在显示中为 br 标记提供垂直“提升”，则会出现正确的垂直间距，但显示会逐渐缩进显示每个 br 标签。缩进正好等于电梯与实际印刷线高度不同的量。如果你猜对了正确的升力，那么没有缩进，只有一条堆积线完全等于原始的字形高度，在前一行和后一行之间卡住。
此外，尾随 br 标记将导致以下html显示标记继承 br：after 内容样式。此外，伪元素导致＆lt; br＆gt; ＆LT峰; br＆GT;被解释为单个＆lt; br＆gt;。虽然伪类 br：活动导致每个＆lt; br＆gt;单独解释。最后，使用br：active忽略伪元素 br：after 和所有br：active样式。所以，所需要的只是：
br:active { }
这对于创建2px高＆lt; br＆gt;没有帮助。显示。这里伪类：active被忽略了！
br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
这只是部分解决方案。如果经过调整，伪类和伪元素可以提供解决方案。这可能是CSS解决方案的一部分。 （我只有Safari，在其他浏览器中试用。）
答案 6 :(得分：1)
BR不是特别的＆＃39;它仍然是一个可以赋予属性的有效XML标记。例如，您不必使用跨度来包围它来更改行高，而是可以将行高直接应用于元素。
你可以用内联CSS做到这一点：
This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!
注意如何使用两个换行符而不是一个换行符。这是因为CSS内联元素的工作原理。不幸的是，截至2019年，最令人敬畏的css功能（lh unit）仍然没有任何浏览器兼容性。因此，我必须在下面的演示中使用JavaScript。
addEventListener("load", function(document, getComputedStyle){"use strict";
var allShowLineHeights = document.getElementsByClassName("show-lh");
for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
allShowLineHeights[i].textContent = getComputedStyle(
allShowLineHeights[i]
).lineHeight;
}
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}This is a small line
<span class="show-lh r"></span><br /><span class="show-lh r"></span>
break. Whereas, this is a BIG line
<span class="show-lh g"></span><br /><span class="show-lh g"></span>
<span class="show-lh b"></span><br style="line-height:40vh"/><span class="show-lh b"></span>
break!
您甚至可以使用任何您想要的CSS选择器，如ID和类。
#biglinebreakid {
line-height: 450%;
// 9x the normal height of a line break!
}
.biglinebreakclass {
line-height: 1em;
// you could even use calc!
}This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!
您可以在the W3C docs找到有关行高的更多信息。
基本上，BR标签在CSS样式世界中并不是一些空白：它们仍然可以设置样式。但是，我建议仅使用line-height来设置BR标记的样式。它们从来没有打算只是一个换行符，因此当它们用作其他东西时，它们可能并不总是按预期工作。观察在应用大量视觉效果后，换行仍然是不可见的：
#paddedlinebreak {
display: block;
width: 6em;
height: 6em;
background: orange;
line-height: calc(6em + 100%);
outline: 1px solid red;
border: 1px solid green;
}<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<br id="paddedlinebreak" />
break.
</div>
对于诸如边距和填充之类的事情的解决方法是改为设置带有br的跨度。
#paddedlinebreak {
background: orange;
line-height: calc(6em + 100%);
padding: 3em;
}<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<span id="paddedlinebreak"><br /></span>
break.
</div>
注意上面的橙色斑点是包含br的范围。
答案 7 :(得分：1)
由于'margin'在Chrome中不起作用，所以这就是我改用'border'的原因。
br {
display: block;
content: "";
border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
@-moz-document url-prefix() {
br {
margin-bottom: 10px; // As 'border-bottom' doesn't work in firefox and 'margin-bottom' doesn't work in Chrome/Safari.
}
}
答案 8 :(得分：0)
The line height of the <br> can be different from the line height of the rest of the text inside a <p>. You can control the line height of your <br> tags independently of the rest of the text by enclosing two of them in a <span> that is styled. Use the line-height css property, as others have suggested.
<p class="normalLineHeight">
Lots of text here which will display on several lines with normal line height if you put it in a narrow container...
<span class="customLineHeight"><br><br></span>
After a custom break, this text will again display on several lines with normal line height...
</p>
答案 9 :(得分：0)
<font size="4"> <font color="#ffe680">something here</font><br>
我一直在尝试所有这些方法，但是大多数方法对我来说都无法正常工作，最终我意外地做到了这一点，并且效果很好，它适用于chrome和safari（我唯一测试过的方法）。将颜色代码替换为背景颜色代码，文本将不可见。您还可以根据需要调整字体大小以使换行符变大或变小。真的很简单。
答案 10 :(得分：0)
#biglinebreakid {
line-height: 450%;
// 9x the normal height of a line break!
}
.biglinebreakclass {
line-height: 1em;
// you could even use calc!
}This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!