Css 如何清除固定高度div和内部跨距？因此，当我在寻找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> 卧式分离器可以被跨度隐藏的东西！可以被跨度隐藏的东西！_Css_Html

Css 如何清除固定高度div和内部跨距？因此，当我在寻找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> 卧式分离器可以被跨度隐藏的东西！可以被跨度隐藏的东西！

css html

Css 如何清除固定高度div和内部跨距？因此，当我在寻找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> 卧式分离器可以被跨度隐藏的东西！可以被跨度隐藏的东西！,css,html,Css,Html,我需要做什么才能使跨度和后面的任何东西之间完全没有重叠？我曾尝试将分隔符包装在另一个div中，并使用clear、overflow等，但实际上我想不出任何方法可以让另一个div避开跨度。我想用当前的分隔符做什么，或者我需要改变它吗？试试这个： <div style='margin-top:10px'>Stuff that can be hidden by the span!Stuff that can be hidden by the span!</div> 可以被spa

我需要做什么才能使跨度和后面的任何东西之间完全没有重叠？我曾尝试将分隔符包装在另一个div中，并使用clear、overflow等，但实际上我想不出任何方法可以让另一个div避开跨度。我想用当前的分隔符做什么，或者我需要改变它吗？

试试这个：

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

可以被span隐藏的东西！可以被跨度隐藏的东西！

试试这个：

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

可以被span隐藏的东西！可以被跨度隐藏的东西！

您应该能够在包含跨度的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>


卧式分离器
可以被跨度隐藏的东西！可以被跨度隐藏的东西！

您应该能够在包含跨度的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>


卧式分离器
可以被跨度隐藏的东西！可以被跨度隐藏的东西！

只需在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>


卧式分离器
可以被跨度隐藏的东西！可以被跨度隐藏的东西！

只需在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>


卧式分离器
可以被跨度隐藏的东西！可以被跨度隐藏的东西！

这是可行的，我使用了边距而不是边距底部，使用em值而不是像素。我想我只是想得太简单了。@Crag我们有时都会这么做：）更新样本以满足@subhaze的建议他是对的。0.6em将是最准确的值。不过，我使用了margin而不是margin bottom，使用em值而不是像素。我想我真的是想太简单了。@Crag我们有时都会这么做：）更新样本以满足@subhaze的建议他是对的0.6em将是最准确的值填充会导致div中的“行”也增长，这是不需要的。边距确实提供了我所需要的。填充也会导致div中的“行”增长，这是不需要的。不过，保证金确实提供了我所需要的。