盒子模型 外邊距

2021-10-06 16:09:24 字數 541 閱讀 2758

外邊距(margin)

- 外邊距不會影響盒子可見框的大小

- 但是外邊距會影響盒子的位置

- 一共有四個方向的外邊距:

margin-top

- 上外邊距,設定乙個正值,元素會向下移動

margin-right

- 預設情況下設定margin-right不會產生任何效果

margin-bottom

- 下外邊距,設定乙個正值,其下邊的元素會向下移動

margin-left

- 左外邊距,設定乙個正值,元素會向右移動

- margin也可以設定負值,如果是負值則元素會向相反的方向移動

- 元素在頁面中是按照自左向右的順序排列的,

所以預設情況下如果我們設定的左和上外邊距則會移動元素自身

而設定下和右外邊距會移動其他元素

- margin的簡寫屬性

margin 可以同時設定四個方向的外邊距 ,用法和padding一樣

- margin會影響到盒子實際占用空間

盒子模型外邊距

初始化網頁元素 網頁中所有元素的內外邊距都為0 盒子水平居中 左右外邊距設定為auto。前提條件 有width。margin 0 auto 1.給相鄰兩個盒子都設定了margin時,垂直方向外邊距取兩者中的最大值 合併解決 只給乙個盒子外邊距 box1 box22.塌陷 巢狀的兩個盒子都設定了mar...

CSS盒子模型之外邊距

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

css盒子模型外邊距(margin)

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