【我的解決方法】
給該父元素新增如下**
border-top: 1px solid rgba(0,0,0,0);
box-sizing:border-box;
【原因】
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分隔。因為巢狀也屬於毗鄰，所以在樣式表中優先順序更高的 .show h2的margin覆蓋了之前外層div定義的margin，導致最終整個div產生10px的間距。
若給h2也新增乙個class，並且在.show之前定義，則最終結果如第乙個圖所示，最終margin顯示為0；
【解決辦法】
1. 父級或子元素使用浮動或者絕對定位absolute
浮動或絕對定位不參與margin的摺疊
2. 父級overflow:hidden;
3. 父級設定padding（破壞非空白的摺疊條件）
4. 父級設定border
CSS margin top父元素下落
我的解決方法 給該父元素新增如下 border top 1px solid rgba 0,0,0,0 box sizing border box 原因 css2.1盒模型中規定的內容 in this specification,the expression collapsing margins me...
浮動元素撐起父級元素
浮動會使元素脫離文件流，如果不設定父級高度，父級將失去高度，影響頁面布局。這裡總結了一些常用的方法，是父級 有高度 1.設定父級高度 設定乙個合適的高度，這種方法比較適用於元素高度固定的場景。2.設定父級元素 overflow hidden 這種方法比較簡單，但要確保父級元素沒有溢位樣式。3.設定父...
子元素蓋住父元素邊框
做tab選項卡頁的時候,當前活動的選項卡有邊框,同時下邊和面板之間無邊框 記得以前實現過,但再用的時候卻又不會了.現在實現如下.tab頁標題區域的html 乙個div下的若干span,每個span對應乙個選項卡.home profile 選項卡下面的線,是tabs框的下邊框 tabs border ...