盒子外邊距

margin:10px;

乙個值:上下左右

margin:10px 20px ;

二個值：上下/左右

margin:10px 20px 30px ;

三個值:上 左/右 下

margin:10px 20px 30px 40px;

四個值：上 下 左 右

*

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

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

.box$*n:n表示盒子個數

1.給相鄰兩個盒子都設定margin,垂直方向外邊距取兩者中的最大值：合併的解決：只給乙個盒子外邊距。

2.塌陷：巢狀的兩個盒子都設定了margin,垂直方法的外邊距取大值，塌陷的解決方法：

1.給父元素加border；

2.給父元素加overflow:hidden

overflow：溢位

hidden：隱藏

>
>
charset
="utf-8"
/>
>
盒子模型外邊距title
>
>
.box
.box2
style
>
head
>
>
class
="box"
>
div>
class
="box2"
>
div>
body
>
html
>

>
>
charset
="utf-8"
>
>
margin的應用title
>
>
/*1.初始化網頁元素：網頁中所有的元素的內外邊距都為0*/
*.box
style
>
head
>
>
class
="box"
>
div>
body
>
html
>

>
>
charset
="utf-8"
>
>
盒子的塌陷與合併title
>
>
*/*1.給相鄰兩個盒子都設定margin,垂直方向外邊距取兩者中的最大值;*/
/*合併的解決：只給乙個盒子外邊距；*/
/*2.塌陷:巢狀的兩個盒子都設定了margin,垂直方法的外邊距取最大值,塌陷的解決方法:
1.給父元素加border;
2.給父元素加overflow:hidden*/
div.box1
.box2
.box3
.box4
style
>
head
>
>
class
="box1"
>
box1div
>
class
="box2"
>
box2div
>
class
="box3"
>
class
="box4"
>
div>
div>
body
>
html
>

盒子外邊距合併問題

兩個div盒子一排 第乙個margin bottom為正 20px 第二個margin top 為正 20px 兩個盒子的外邊距會合併 為10px 也就是說兩個盒子自身的外邊距是盒子自身的一半 負數也是一半值是負數 兩個數值和為零會合拼 安照上面所述 一正一負數值是一樣會鏈結在一起 比如上20px ...

盒子模型 外邊距

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

關於盒子外邊距合併

外邊距合併，對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上邊距會與子元素的上邊距合併，合併後的外邊距取兩者中的較大者。即使父元素的上外邊距為0，也會發生合併。即為當父盒子裡的子盒子給它乙個margin值時，子盒子的移動會影響父盒子一起移動 這裡當子盒子給了margin top ...