在子元素設定margin-top，有時會帶著父元素一起移動。
原因：outer div [margin: 0 auto]
inner div [margin-top: 10px]
根據css2.1盒模型規範，兩層div結構，outer div屬性為「margin:0 auto」，本該緊貼外框頂部的，如果沒有inner div，或者沒有inner div的「margin-top」屬性，一切如預期。但是當inner div設定了「margin-top:10px」之後，它的父元素outer div也被撐出來乙個本不該有的「margin-top:10px」效果。
css2.1的盒模型中的規定：
in this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗鄰的兩個或更多盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding或border分隔。
「巢狀」的盒元素也算「毗鄰」，也會導致公用border。
知道原因了，解決辦法有三種：
1，若子div塊中使用margin-top,則在父div塊中新增：overflow:hidden;
2，outer div加上 padding/border
3，outer div / inner div設定為 float/position:absolute(css2.1規定浮動元素和絕對定位元素不參與margin摺疊)。
我採用第二個辦法，只要讓兩個div之間有空隙就可以了。那麼在父div設定padding:0.5px;即可
子元素設定margin top，父元素也受影響
外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 firffox chrome opera sarfi 產生問題，ie下反而表現良好。例子可以檢視下面 ie下表現 正常 標準瀏覽器下檢視出現 bug 效果如下圖 解決辦法是 給父元素加個p...
子元素設定margin top，父元素也受影響
這個問題困惑了非常久。儘管沒有大礙早就摸出來怎麼搞定它。但始終不明確原因出在 假設僅僅是ie有問題我也不會太在意。可問題是全部上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，竟然是css2.1盒模型規範 儘管非常彆扭，非常彆扭的規定。問題例如以下。兩層div結構。outer d...
css子元素的margin top為何會影響父元素
詳細內容 這個問題困惑了很久，雖然沒有大礙早就摸出來怎麼搞定它，但始終不明白原因出在 如果只是ie有問題我也不會太在意，可問題是所有上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，居然是css2.1盒模型規範 雖然很彆扭，非常彆扭的規定。問題如下圖，兩層div結構，outer ...