margin top對於父元素的影響

案例問題：

子元素設定的margin-top沒有起作用,還是定在頂到了父元素的邊緣！並且影響父元素移動

案例**：

*        body

.father
.son
<
/style>
="father"
>
="son"
>
<
/div>
<
/div>

分析:：

垂直外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，如果你讀過了w3shcool的css外邊距合併的文章後，就很容易討論這個問題了。這個問題發生的原因是根據規範，乙個盒 子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會和其內部文件流中的第乙個 子元素的上邊距重疊。

說白了就是:父元素的第乙個 子元素的上邊距margin-top如果碰不到有效的border就會不斷一層一層的找自己父元素，祖先元素的麻煩。

解決方法:

只要給父元素設定個有效的border，overflow:hidden就可以有效的管制這個margin,防止它越級，影響其他元素，把自己的margin當父元素的margin執行。

.father

margin top影響父元素定位

寫樣式時無意中發現margin top會影響到父元素的定位，下面是示例 html div class demo div class inner 子元素 div div css demo.inner效果如下 如上圖所示 在子元素設定了margin top 30px時，父元素會掉落30px,而子元素和父...

關於子元素的margin top影響父元素

來看看這個問題 子元素為什麼設定margin top會影響父元素的margin top。先把html,body,div的預設margin，padding設為0,再給父元素設定寬高，子元素設定寬高。然後又設定子元素的margin top為20px。效果如下 查了下，簡單來說是因為父元素沒有設定padd...

子元素的margin top會影響父元素

恢復內容開始 在css2.1盒模型中 in this specification,the expression collapsing margins means that adjoining margins no non empty content,padding or border areas o...