CSS Margin塌陷和盒子居中

2021-08-09 18:47:23 字數 1404 閱讀 9004

margin的塌陷現象:

標準文件流中,豎直方向的margin不疊加,以較大的為準。

水平方向的疊加

哈哈哈哈

嘿嘿嘿嘿

如果不在標準流,比如盒子都浮動了,那麼兩個盒子之間是沒有塌陷現象的:

*

div.p1

.p2

兩個盒子都浮動了,所以沒有塌陷現象了,margin-bottom: 40px;和margin-top: 30px;疊加了。

盒子居中margin: 0 auto;

這種時候盒子貼著右邊:

div
這種時候盒子貼著左邊:

div
margin的值可以為auto,表示自動。

當left、right兩個方向都是auto的時候,盒子居中:

margin-left:auto;

margin-right:auto;

簡寫為:

margin:0 auto;
注意:

使用margin: 0 auto的盒子,必須有width,有明確的width

只有標準流的盒子,才能使用margin:0 auto; 居中。也就是說,當乙個盒子浮動了、絕對定位了、固定定位了,都不能使用margin:0 auto;

margin: 0 auto;是在居中盒子,不是居中文字。居中文字要使用text-align:center;

margin:0 auto; 讓這個div自己在大容器中居中;

text-align:center; 讓這個div內部的文字居中;

塊級元素想要居中,要用margin居中,而不是text-align。

的居中使用text-align: center;

善於使用父親的padding,而不是兒子的margin

如果父親沒有border,那麼兒子的margin實際上踹的是「流」,踹的是這「行」。所以父親整體也掉下來了。

這個p有乙個margin-top踹父親,試圖將自己下移:

如果父親沒有border,那父親也會下來,如果父親有border,這樣就可以分離開了。

margin的這個屬性,本質上描述的是兄弟與兄弟之間的距離,最好不要用這個margin表達父子之間的距離,所以要善於使用父親的padding而不是兒子的margin。

以上,用padding-top,盡量少用margin。

css margin塌陷問題

垂直並列 先設定兩個div,並分別設定寬高背景色。挨著不太好看,在原來樣式的基礎上給兩個div設定margin box1設定margin bottom 40px box2設定margin top 20px box1 box2 按照正常的思維40 20 60,所以box1和box2的邊距應該是60px...

css margin塌陷問題

html block1 block2 同級元素1 同級元素2 同級元素3 css body block1 block2 ib 結果圖1 圖2 圖3 先看block1跟block2,按道理說,block1 有margin bottom 10px block2有margin top 20px 那麼blo...

CSS margin帶來的塌陷問題

塌陷問題 就是當父元素包裹子元素時,子元素設定margin top時,並不是子元素上邊距離父元素上邊一段距離,而是子元素和父元素同時距離bfc 塊級格式上下文 下邊的距離 如下body 解決塌陷問題1.給父盒子新增border 2.給父盒子新增padding top 3.給父盒子新增overflow...