◆為什麼會折疊:
造成以上現象的原因是, 我們在CSS中並沒有聲明id為ID1的元素div的height(高), 因此它的高便被設為auto(自動)了. 一旦其值被設為auto, 那麼浏覽器就會認為它的高為子元素ID2的border-top到border-bottom之間的距離, 即Fig. 4中bc的長度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出現了Fig. 4中ab與cd之間的空白區域. 因此父元素ID1的margin-top/bottom因子元素的”紅杏出牆”而被折疊消失了.
如何解決折疊問題: 可能大家最初想到的辦法就是根據折疊發生的原因—auto, 來解決問題. 但是, 在實際操作中, 某些元素如div, h1, p等, 我們是不可能預先知道它的高是多少的, 因此在CSS文件中是不能常規通過聲明元素的高來解決折疊問題.
我們需要在CSS文件中加入如下代碼(紅色部分):
- #ID1 {
- background-color: #333;
- color: #FFF;
- margin-top: 10px;
- margin-bottom: 10px;
- padding-top:1px;
- padding-bottom:1px;
- }
或是：
- #ID1 {
- background-color: #333;
- color: #FFF;
- margin-top: 10px;
- margin-bottom: 10px;
- border-top:1px solid #333;
- border-bottom:1px solid #333;
- }
通過增加以上代碼, 便可使浏覽器重新計算ID1的高, 使其為子元素ID2的margin-top/bottom外緣(outer top/bottom)之間的距離, 即Fig. 3中be的距離.