css - 如何清除固定高度的 div 和内部跨度？

Question

所以我在this question中找到了答案当我正在寻找 hr 标签的替代品时，它允许我在 hr 中间输入一些文本。它工作正常并且看起来很棒，但是有一个问题(我相信值得它自己的问题)。分隔符正下方的任何内容都会被跨度的背景色剪裁和隐藏。

<div style="height: 2px; background-color: #006600; text-align: center;">
    <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>

http://jsfiddle.net/xZn6c/

我需要做什么才能使跨度和之后的任何内容完全不重叠？我试过将分隔符包装在另一个 div 中并使用 clear、overflow 等，但我想不出任何能真正使另一个 div 摆脱跨度的方法。我想用当前的分隔符甚至可以做些什么，还是我需要改变它？

Answer 1

您应该能够向包含跨度的 div 添加边距底部。

<div style="height: 2px; margin-bottom:0.6em; background-color: #006600; text-align: center;">
    <span style="padding: 0px 3px; background-color: white; position: relative; top: -0.6em;">Horizontal Separator</span>
</div>
<div>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div>