如何使用 CSS 模拟 <br/>（br 标签）？

Question

我这里有以下 css 和 html 行：

CSS：

 .top, .title {
font-weight: bold;
}
.bottom, .Content {
}

HTML:

 <span class='title'>Title</span>
<br/>
<span class='Content'>Content</span>
<br/><br/>

我想用 CSS 中的等效标记替换 <br/> 标记，但我正在努力解决它。我将不胜感激任何帮助。

我试过 margin-bottom、margin-top、line-height，都没有用。

原文由 user717236 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<span> is an inline element, so can’t have margin applied, but it can take padding - give it something like .title { padding: 10px 0; } and它会模拟一个段落，或者只是 .title { display: block; } 来强制下一个内容在它下面。

原文由 Joe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以像这样模拟 BR 标签宽度 CSS：

 span:after {
    content: ' ';
    display: block;
}

如果需要在跨度内容之前模拟“br”，请使用选择器“:before”

小提琴手

原文由 Viter Rod 发布，翻译遵循 CC BY-SA 3.0 许可协议