如何改变<br>的高度？

CSS：

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

该解决方案可能与跨浏览器不兼容，但至少是这样。还可以考虑设置 line-height：

line-height:22px;

对于 Google Chrome，consider 设置 content：

content: " ";

除此之外，我认为你被 JavaScript 解决方案所困。

---

因此，上面的窥视者基本上得到了类似的答案，但这里非常简洁。适用于 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 */
}

---

这是实际上具有跨浏览器支持的正确解决方案：

  br {
        line-height: 150%;
     }

---

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

因此：

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

为了使用 HR 模拟更干净的 BR 中断：顺便说一句，适用于所有浏览器！

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

---

我刚遇到这个问题，我通过使用解决了这个问题

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

---

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

---

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

---

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

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

这是 QuirksMode 上的 example。

---

有趣的是，如果中断标签以完整形式写成如下：

<br></br>

然后 CSS line-height:145% 工作。如果中断标签写成：

<br> or 
<br/> 

那么它就不起作用了，至少在 Chrome、IE 和 firefox 中是这样。诡异的！

---

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和安卓）。）

经过反复试验，我最终得到了以下替代品，它适用于所有这些浏览器的当前版本：

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

笔记：

line-height:190% 适用于除基于 Chrome 的浏览器的最新版本之外的所有设备。

IE 和 Edge（与 line-height:190% 结合使用）需要 vertical-align:top，以获得额外的空间来位于它所属的前一行之后，而不是部分之前和部分之后。

display:block;content:"";margin-top:0.5em 适用于 Chrome、Opera 和Firefox，但不是 Edge & IE。

如果您不介意编辑 HTML，在 <br> 标记后添加一些额外垂直空间的替代（更简单）方法是使用类似这样的方法。它在所有浏览器中都能正常工作：

<span style="vertical-align:-37%"> </span><br>

（当然，您可以根据需要调整“-37%”，以获得更大或更小的差距。）这是一个演示页面，其中包括主题的其他一些变体：

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



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。尚未在资源管理器中测试。 （Windows 平板电脑没电了。）

换行符、字体大小在 Firefox 和 Safari 中的工作方式不同。

---

我知道这是一个老问题，但对我来说，它实际上是通过使用带边距的空段落来工作的：

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

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

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

---

我有一个想法，你也许可以使用：

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

但这在 chrome 或 firefox 上不起作用。

只是想我会提一下，以防其他人发生这种情况，我会为他们省去麻烦。

---

这是适用于 IE、Firefox 和 Chrome 的解决方案。想法是将 br 元素的字体大小从正文大小的 14px 增加到 18px，并将元素降低 4px，使额外的大小低于文本行。结果是 br 下方有 4px 的额外空白。

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

---

对我有用的是在段落标签之间添加这个内联......虽然不是最好的解决方案。

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

- - - - 编辑 - - - - -

我遇到了 PC/Mac 的问题...它为文本提供了新的行高，但不进行换行...您可能想自己做一些测试。对不起！

---

请记住，按照某处的建议（错误）使用 <hr> 标记将结束 <p> 标记，因此请忘记该解决方案。
如果 f.ex.在周围的 <p> 上设置了某些样式，插入 <hr> 后，其余内容的样式就消失了。

---

在 Markdown 中使用一些 HTML，不得不在导致过于狭窄的列表中强制使用 <br>，所有给定的解决方案都没有按预期工作（至少在我的设置中）

结束了

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

我发现它here，非常接近 dorogz 的建议。当然对于标准需求CSS更好

---

迈克尔和尤达都是对的。您可以做的是使用 <p> 标记，它是一个块标记，它使用下边距来偏移以下块，因此您可以执行类似的操作来获得更大的间距：

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

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

---

您似乎无法调整 BR 的高度，但您可以使用 display:none 使其可靠地消失

在搜索以下解决方案时遇到此页面：

我有一种情况，第 3 方支付网关 (Worldpay) 只允许您使用最多 10k 的 CSS 和 HTML（不允许脚本）自定义他们的支付页面，这些 CSS 和 HTML（不允许脚本）被注入到他们的模板正文中，并且在几个 BR、FONT 标签等之后. 再加上他们的 DTD 强制 IE7/8 进入 Quirks 模式，这使得跨浏览器定制变得非常困难！

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

---

我必须开发一种将 HTML 转换为 PDF 的解决方案，并将表格单元格中的文本垂直居中，但除了输入纯 <br>

因此，跳出框框思考，我通过调整字体大小（以 pt 为单位）来更改垂直大小。

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

---

尝试在包含 br 标记的 p 标记上使用 CSS line-height 属性。请记住，如果您想隔离它，您可以id p 标记，但使用 div 进行隔离可能会更好，IMO。

---

对不起，如果其他人已经说过了，但简单的解决方案是玩弄你的“行高”。如果您在使用换行符时获得了太多空间，那仅仅是因为您将行高设置得太高。您可以在 CSS 中更正此问题（但知道它会影响使用该属性的所有内容），或者您可以执行内联样式来覆盖 CSS。

---

代替

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

我做到了，我将段落放在一个 div 中并给它 line-height:2px

#html

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

#css

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

---

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

====== 方法一 ======

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;
}

或 ====== 方法 3 ======

br:after { content: "" }
br { content: "" }

---

你也可以在 CSS 中使用“block-quote”属性。这将使它不会影响您的单个行，但允许您为段落之间的中断或“块引号”设置参数。

更新：我的立场得到纠正。 “blockquote”实际上是一个 html 属性。您可以像在工作中使用

和

一样使用它。然后，您可以在 css 中设置块引用的参数，例如

blockquote { margin-top: 20px }

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

---

<span style="line-height:40px;"><br></span> 

您必须内联并在每个元素上执行此操作，但它应该在大多数浏览器上工作 拨弄行高以获得所需的效果。如果你在每个元素上内联，它应该可以在大多数浏览器和电子邮件中工作（但这太复杂了，无法在这里讨论）。

---

当我无法从 span 标签中获得样式间距时，这对我有用：

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

---

使用<div>

<div>Content 1</div>Content 2

这允许没有任何垂直空间的新行。

这变成

内容 2

---

在解决由 <br> 标记引起的间距问题时，为到达此处的任何人提供更笼统的回答。我必须做很多重置才能接近像素完美。

br {
    content: " ";
    display: block;
}

对于我要解决的特定问题，我必须在两行之间留出特定的空间。我在顶部和底部添加了边距。

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

---

我通过使用组合解决方案让它在 IE7 中工作，但主要是按照 Nigel 和其他人的建议将 Br 包装在 DIV 中。添加了 ID 并在 =“server” 处运行，因此我可以在从复选框行中删除复选框时删除 BR。

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

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

---