margin屬性用於設定外邊距,即控制盒子和盒子之間的距離
屬性作用
margin-left
左外邊距
margin-right
右外邊距
margin-top
上外邊距
margin-botom
下外邊距
外邊距典型應用
外邊距可以讓塊級盒子水平居中, 但是必須滿足兩個條件：
①盒子必須指定了寬度(width)
②盒子左右的外邊距都設定為auto
.headermargin-left:auto; margin-right:auto;
margin:auto;
margin: 0 auto;
外邊距合併
1.使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併。
2.巢狀塊元素垂直外邊距的塌陷
對於兩個巢狀關係(父子關係)的塊元素,父元素有上邊距同時子元素也有上邊距,此時父元素會塌陷較大的外邊距值。
注：浮動的盒子不會有外邊距合併的問題
解決方案:
①可以為父元素定義邊框
②可以為父元素定義內邊距
③可以為父元素新增overflow:hidden
盒子模型 外邊距
外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距，設定乙個正值，元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距，設定乙個正值...
盒子模型外邊距
初始化網頁元素 網頁中所有元素的內外邊距都為0 盒子水平居中 左右外邊距設定為auto。前提條件 有width。margin 0 auto 1.給相鄰兩個盒子都設定了margin時，垂直方向外邊距取兩者中的最大值 合併解決 只給乙個盒子外邊距 box1 box22.塌陷 巢狀的兩個盒子都設定了mar...
CSS盒子模型之外邊距
外邊距 不會影響盒子的大小,但會影響盒子的位置 margin top 上邊距,設定乙個正值,元素會向下移動 margin left 左邊距,設定乙個正值,元素會向右移動 margin right 右邊距,設定乙個正值,下面的元素會向右移動 margin bottom 下邊距,設定乙個正值,下面的元素...