盒子模型外邊距

2021-10-10 18:21:57 字數 940 閱讀 7530

初始化網頁元素:網頁中所有元素的內外邊距都為0

*

盒子水平居中:左右外邊距設定為auto。前提條件:有width。

margin: 0 auto;

1.給相鄰兩個盒子都設定了margin時,垂直方向外邊距取兩者中的最大值;

合併解決:只給乙個盒子外邊距;

.box1	

.box2

2.塌陷:巢狀的兩個盒子都設定了margin,垂直方向的外邊距取最大值;

塌陷的解決方法:

給父元素加border;

給父元素加overflow:hidden;

.box3

.box4

外邊距margin:

四個值:上-右-下-左;順時針走向

padding: 30px 10px 40px 20px;

三個值:上-左/右-下

padding: 10px 30px 20px;

兩個值:上/下-左/右

padding: 20px 10px;

乙個值:上/下/左/右

padding: 10px;

.box$*2;數字代表盒子個數

box1

box2

.box3>.box4

然後敲一下tab鍵就出來下面的**啦

盒子模型 外邊距

外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距,設定乙個正值,元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距,設定乙個正值...

CSS盒子模型之外邊距

外邊距 不會影響盒子的大小,但會影響盒子的位置 margin top 上邊距,設定乙個正值,元素會向下移動 margin left 左邊距,設定乙個正值,元素會向右移動 margin right 右邊距,設定乙個正值,下面的元素會向右移動 margin bottom 下邊距,設定乙個正值,下面的元素...

css盒子模型外邊距(margin)

margin屬性用於設定外邊距,即控制盒子和盒子之間的距離 屬性作用 margin left 左外邊距 margin right 右外邊距 margin top 上外邊距 margin botom 下外邊距 外邊距典型應用 外邊距可以讓塊級盒子水平居中,但是必須滿足兩個條件 盒子必須指定了寬度 wi...