DIV CSS 佈局教程網

為什麼會折疊:

造成以上現象的原因是,我們在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:1pxsolid#333;  
border-bottom:1pxsolid#333;  
}  
 

通過增加以上代碼,便可使浏覽器重新計算ID1的高,使其為子元素ID2的margin-top/bottom外緣(outertop/bottom)之間的距離,即Fig.3中be的距離.

本文來源於php愛好者http://www.phplover.cn/,原文地址：http://www.PHPlover.cn/post/padding-margin.Html

【編輯推薦】

1. DIV+CSS中padding和margin屬性用法
2. 實例解析CSS padding 屬性用法
3. 探究IE和Firefox下的2款HTTP調試工具用法
4. DIV+CSS開發XHtml網頁對SEO優化的影響
5. DIV CSS網頁布局中對段落進行排版的方法