如何改变<br>的高度？

Posted 2023-03-05

【中文标题】如何改变<br>的高度？

【英文标题】：How to change the height of a <br>?

【发布时间】：2010-11-27 10:26:58

【问题描述】：

我有一大段文字，用<br>'s 分成小段：

<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，我也简单地用谷歌搜索和Stack Overflow-ed，但没有找到任何解决方案。这甚至可以在不改变布局的情况下实现吗？

【问题讨论】：

您的格式可能会让人误以为 br 标签具有高度值。如下所述，它们只是换行符。你试过在你的文字处理器中做类似的事情吗？

改变 的高度在语义上是错误的。 意味着您只需在文本中添加另一行，并且单个段落应具有固定的行高。如果某些文本是分开的，它应该是一个单独的段落。

I've written a thorough response to a similar question here.

@JohnHenckel 有点误导，因为<p> 标签不能包含<div> 标签see this post

有时我们获得的格式化代码不是我们可以控制的。正是在这些时候，你开始对自己说“我不能添加

【参考方案1】：

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

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

这是example 上的QuirksMode。

【讨论】：

是的，我对 :before content ; 寄予厚望也是，但它让我失望了。

在某处注入它，它应该可以工作。唉，它在 IE6/7 中不起作用。

【参考方案2】：

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

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

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

【讨论】：

感谢您的回答，但我已经声明我现在无法更改此布局。当然，如果可能的话，我会把它改成更理智的东西，但是现在——对不起。

【参考方案3】：

据我所知<br> 没有 高度，它只是强制换行。除了自动换行之外，您所拥有的是带有一些换行符的文本，not 子段落。您可以更改行距，但这会影响所有行。

【讨论】：

看来真的没办法了。我什至尝试过使用 :before 和 :after 属性，但是...... :(

我知道这已经很老了，但@Isaac Minogue 有一个有效的方法来做到这一点。修改 content 属性就可以了。

【参考方案4】：

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

【讨论】：

是的，当然，但这不是我想要的。

这与您想要的有什么不同？它会增加行间距。

我的文本中有超过九个废话。想象一下几千字节的文本，用三个 分成三个块。

如果将行高应用于<br>标签，那么强制换行符将大于换行符...

听起来更像你想要三个段落而不是使用