html - 如何调整 CSS 中每个 处两行之间的间距？

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;

那个a的高度<br>标记表示继承自其父容器的样式。因此，如果它嵌套在一个段落中； <br>将等于基于该段落的行高和字体大小的 1 行文本的高度。

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

我现在有一个空页面，但该页面高 10 像素，因为我指定该段落应为 10 像素，即使该段落基本上是空的，但它不是空的，因为我有休息时间。因此，中断相当于 1 行文本的高度。

The current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially. - Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements

---

一个合适的解决方案是将上下 block 分成两个容器 ( <p> ) 并在两个 block 之间设置边距。如果您使用 <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 很有用。

---

虽然我不明白为什么；我确实相信这样一个事实，即有时总是有充分的理由打破规则。将其包裹在容器中并设置容器的行高。

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