margin top影響父元素定位

寫樣式時無意中發現margin-top會影響到父元素的定位，下面是示例：

html**：

<

div 
class
="demo"
>
<
div 
class
="inner"
>
子元素   
div>
div>

.demo.inner

如上圖所示：在子元素設定了margin-top=30px時，父元素會掉落30px,而子元素和父元素並沒有拉開30px的差距。

網上查了一些資料：

原因是：原因是根據規範，乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。

找到了原因那問題就方便解決啦，下面是解決辦法：

1. 給父元素增加屬性：overflow:hidden;

2. 給父元素增加邊框，如果不需要邊框則加乙個透明邊框，不會影響到樣式

3. 可以用父元素的padding-top來代替子元素的margin-top

4. 給父元素新增屬性 position：absolute

下面是解決之後的樣式：

by 新手小白的記錄

margin top對於父元素的影響

案例問題 子元素設定的margin top沒有起作用,還是定在頂到了父元素的邊緣！並且影響父元素移動 案例 body father son style father son div div 效果如下 分析 垂直外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距，...

關於子元素的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...