BR标签有高度吗？答案

【问题标题】：Does BR tag posseses height?BR标签有高度吗？
【发布时间】：2011-10-25 12:02:12
【问题描述】：

我知道 BR 用于创建换行符。我只是想知道它是否也会在行之间产生空间？请考虑以下示例：

<p>
Hello <br/> Stackoverflow <br/><br/><br/> !
</p>

输出如下：

Hello
Stackoverflow


!

通过放置越来越多的 BR，我发现线条之间的距离增加了。是因为 吗？但是当我尝试在 CSS 中控制   高度时，它并没有跟随，它似乎根本没有高度，只是一个换行符。如果 不是造成行间距的原因，那么在CSS中是哪个以及如何控制它？另外，我一般用 来拉大线间距，当数据来自数据库时，我这样做是为了替换\n\r之类的，可以吗？

【问题讨论】：

  height-stackoverflow.com/a/20488415/2165415 == 有一个解决方案

标签： html

【解决方案1】：

我发现line-height 在 CSS 中运行良好。 :)

p {
  font-size:20px;
  line-height:280%;
}

<p>
Hello
<br>
World!
</p>

【讨论】：

【解决方案2】：

我发现我们放多个BR时看到的空间实际上不是BR引起的，而是P元素的行高。

考虑以下标记：

<p>
Hello <br/> Stackoverflow <br/><br/><br/> !
</p>

输出

1. Hello
2. Stackoverflow 
3. 
4.    
5.    !

这里的第 3 行和第 4 行只是空行。尽管是空的，但它们仍然具有行高。

【讨论】：

【解决方案3】：

使用的
数量只会创建换行符。如果您希望在页面上的特定部分之间创建大空间，我会使用 CSS 边距属性来分隔顶部与下一部分的距离。例如：

<div id="topSection" class="margin-bottom: 100px;">Hello Stackflow</div>
<div id="bottomSection">Content lower on the screen without unnecessary breaks.</div>

【讨论】：

【解决方案4】：

对于大的行间距，最好每行都使用标签，可以控制高度。

http://jsfiddle.net/efortis/f6ju2/

【讨论】：

p 是一个不错的选择，请参阅我对换行符的编辑。当文本来自数据库时，我将如何使用p？

【解决方案5】：

除了使用   来获得您喜欢的行间距之外，您还可以使用 CSS line-height 属性

【讨论】：

所以你的意思是那些空间不是来自BR，而是来自默认的line-height？
Stackoverflow 和! 之间的空格是由于您添加了  标签。使用line-height CSS 属性时，可以更改行间距（无论是否被强制断开）

【解决方案6】：

是的，通过添加更多BR 标签，将创建新的换行符。最好不要使用BR 标签来创建大的行间距，而是使用CSS margin 和padding 来引入空格。

【讨论】：

我也在考虑使用边距和填充。请查看我对数据库中换行符的编辑。
在这种情况下，使用正则表达式将BR 替换为P。见工作demo here。

【解决方案7】：

  标签用于换行。如果你想这样看的话，你可以使用 CSS line-height 属性来控制线之间的距离。

【讨论】：

【解决方案8】：

BR 元素强行打断（结束）当前行文本...

更多信息here。是的，添加更多会增加距离，但我认为除了应用 clear 之外，您无法对其进行样式设置。

【讨论】：