css父元素和子元素之間margin top的問題

2022-09-11 11:15:11 字數 524 閱讀 5907

問題:父元素的盒子包含乙個子元素盒子,給子元素盒子乙個垂直外邊距margin-top,父元素的盒子也會受到子元素的margin-top值的影響。

原因:所有毗鄰的兩個或者多個元素的margin將會合併為乙個margin共享之。毗鄰的定義為:同級或者巢狀的盒元素,並且它們之間沒有非空內容。padding或者border分隔。其中float和position(css2.1浮動元素和絕對定位元素不參與margin摺疊)

解決方法:

1、修改父元素的高度,增加padding-top樣式模擬(padding-top:1px;新增界限) 

2、為父元素新增overflow:hidden;樣式即可(讓父元素成為bfc,內部布局不受外部影響) 

3、為父元素或者子元素宣告浮動(float:left或者position)(浮動元素的margin垂直方向不疊加) 

4、為父元素新增border (border:1px solid transparent)(新增界限) 

5、為父元素或者子元素宣告絕對定位(bfc)

參考****:

css子元素繼承父元素屬性

樣例 ant design form表單中label樣式的修改 css屬性繼承 文字 color 顏色,a元素除外 direction 方向 font 字型 font family 字型系列 font size 字型大小 font style 用於設定斜體 font variant 用於設定小型大寫...

css子元素如何相對父元素定位?

css123 4567 891011 div1 div2 效果原理 瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。如果我們要對子元素相對父元素進行定位,就要...

css子元素如何相對父元素定位?

css123 4567 891011 div1 div2 效果原理 瀏覽器渲染html,是有文件流的說法的,塊級元素換行渲染,行內元素行內渲染,在這裡,兩個div都是塊級元素,乙個父,乙個子,正常來說的渲染結果是父元素在瀏覽器左上角,子元素在父元素的左上角。如果我們要對子元素相對父元素進行定位,就要...