這些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爲什麼相互排斥？

回答

相關問題