子元素加margin top出現的奇怪情況

**如下：

const stylepraentdiv =

const stylediv =
return
(>
>
<
/div>
<
/div>
);展示：
給父元素加的margin-top:10px , 居然超出了父元素。。σ(⊙▽⊙"a
原因：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分隔。
這就是原因了。「巢狀」的盒元素也算「毗鄰」，也會 collapsing margins。
這個合併margin其實很常見，就是文章段落元素
，並列很多個的時候，每乙個都有上下1em的margin，但相鄰的之間只會顯示1em的間隔而不是相加的2em。
解決方法：
這個問題的避免方法很多，只要破壞它出現的條件就行。給 outer div 加上 padding/border，或者給 outer div / inner div 設定為 float/position:absolute(css2.1規定浮動元素和絕對定位元素不參與margin摺疊)。
1、修改父元素的高度，增加padding-top樣式模擬（padding-top：1px；常用）
2、為父元素新增overflow：hidden；樣式即可（完美）
3、為父元素或者子元素宣告浮動（float：left；可用）
4、為父元素新增border（border:1px solid transparent可用）
5、為父元素或者子元素宣告絕對定位
部分內容摘自：

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

子元素margin top為何會影響父元素？

問題如下 一段很簡單的 css如下 type text css show show h2 style html結構如下 class show crystalh2 div 當在沒有設定margin top時，瀏覽器顯示如預期 設定了margin top後出現了如下所示的現象 我們並沒有給外層的div設...