如何清除固定高度的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中包装分隔符，并使用清除，溢出等，但没有任何我能想到的实际上使其他div脱离span的方式。我想用目前的分离器甚至可以做到这一点，还是我需要改变它？

Answer 1

你就应该能够到下边距添加到含跨度股利。

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

Answer 2

试试这个：

<div style='margin-top:10px'>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div> 

Answer 3

只需将填充添加到您的div风格即可。看起来像padding:5px会照顾它。

<div style="padding:10px;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>