这些div为什么相互排斥？

<html> 
<div style="width:200px;"> 
    <div style="background:red;height:5px"></div> 
    <div style="background:yellow"> 
    Magnets? 
    </div> 
    <div style="background:green;height:5px"></div> 
</div> 
</html>

Rendering with "Magnets?" wrapped in h3 tags 这些div为什么相互排斥？

怎么来的div而不再是连续的，如果 “磁铁？”包裹在段落或标题标签中？

来源

2010-05-20 Lucifer Sam

你有可能包裹元素有默认边距。

来源

2010-05-20 03:31:57

谢谢！将默认边距设置为0有效，但为什么div不能与内容一起展开？ – 2010-05-20 03:39:11

你需要零出对H3或P的利润率。

<html> 
<div style="width:200px;"> 
    <div style="background:red;height:5px"></div> 
    <div style="background:yellow"> 
    <h3 style="margin:0px;">Magnets?</h3> 
    </div> 
    <div style="background:green;height:5px"></div> 
</div> 
</html>

如果你想保持对H3和其他元素的保证金，那么你需要修复的DIV倒塌内的元素的边缘问题。有几种方法来解决这个问题：

添加边框到div
1px的边框添加到div
从元素中取出保证金，并把它添加到div来代替。

来源

2010-05-20 03:37:44

感谢您的回应！该解决方案的工作，但不应该标题的边缘相对于它的父div的填充下降？ – 2010-05-20 03:50:59

阅读以下职位的填充和利润的详细信息：http://www.complexspiral.com/publications/uncollapsing-margins/ http://www.goer.org/HTML/intermediate/margins_and_padding/ – 2010-05-20 13:36:24

@Terminal的问题正在崩溃边缘。阅读上面评论中提供的第一个链接，以获取有关此信息的信息。要修复它，你可以在主div上设置一个1px的填充或者给它一个边框。这将允许您保留h3的边距并使背景颜色包含整个元素。 – 2010-05-20 13:50:07

这些div为什么相互排斥？

回答

相关问题