CSS margin top父元素下落

2021-10-01 15:02:20 字數 854 閱讀 6947

【我的解決方法】

給該父元素新增如下**

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 ...