如何在CSS中的每个<br>处调整两行之间的间距？

Question

我有一个像这样的文件：

This is some text.<br>
This is some more text.<br>
This is yet some more text.

呈现如下：

This is some text.
This is some more text.
This is yet some more text.

有什么方法可以调整行之间的间距，但只能在<br>出现的地方进行调节？输出可能如下所示：

This is some text.

This is some more text.

This is yet some more text.

• 这与双倍空格不同，因为页面上的长行换行不会出现多余的空格。

如何调整<br>出现的行之间的间距？

Answer 1

可以<br>使用CSS 定位标签，但是它与跨浏览器的兼容性不是很好，这不是一个好主意，因为任何在查看您代码的人都会认为您没有最模糊的想法，因为这样做当然是实现目标的更合适的方法。

br {}

在<br>它自己没有默认的高度。如果您的HTML页面仅包含一个，则<br>您将有一个空页面。<br>标签上的样式将为

<!-- HTML -->
<br/>

页面将具有这种样式

height: auto;
line-height: normal;
max-height: none;
min-height: 0px;

<br>标签所代表的高度是从其父容器的样式继承的。因此，如果它嵌套在一个段落中；在<br>将等于1行文字的基础上该段的行高和字体大小的高度。

<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>

我现在有一个空白页，但该页高10像素，因为我指定该段落应为10像素，即使该段落本质上是空白的，但由于我有休息，它也不是空白的。因此，分隔符等于1行文本的高度。

当前的CSS1属性和值无法描述'BR'元素的行为。在HTML中，“ BR”元素指定单词之间的换行符。实际上，该元素被换行符代替。将来的CSS版本可能会处理添加和替换的内容，但是基于CSS1的格式化程序必须特别对待“ BR”。- 级联样式表，级别1，第4.6节：“ BR”元素

适当的解决方案是将上部和下部块分成两个容器（<p>），并在两个块之间设置边距。如果使用<p>标签，则可以在段落之间设置空格样式，而无需像这样在顶部段落中添加不必要的空格。

// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.

或者，如果您不介意每行之间的间距也增加，则仅调整文本的行高

您可能还会发现伪选择器:: first-line有用。

尽管我无法理解为什么；我确实相信这样的事实，有时总是有一个很好的理由来打破规则。如果您绝对肯定不喜欢将样式<br>包装在容器中并设置容器的行高，则不愿意这样做。

<div style="line-height:50px;"><br></div>

Answer 2

是的，你可以...就像line-height在 css 中使用一样

.test{
    line-height:40px;
}

演示

padding-top您还可以使用

演示2