目錄

?一、margin

1.概念及作用

2.基本語法

3.margin的用法

二、padding

1.介紹

2.基本語法及要求

3. 用法

4.內(nèi)邊距和元素寬度

---

講這些之前，先看一張圖，便于理解

?一、margin

1.概念及作用

CSS?margin?屬性用于在任何定義的邊框之外，為元素周圍創(chuàng)建空間。

通過 CSS，您可以完全控制外邊距。有一些屬性可用于設(shè)置元素每側(cè)（上、右、下和左）的外邊距。

2.基本語法

CSS 擁有用于為元素的每一側(cè)指定外邊距的屬性：

margin-top

margin-right

margin-bottom

margin-left

所有外邊距屬性都可以設(shè)置以下值：

• auto - 瀏覽器來計(jì)算外邊距
• length?- 以 px、pt、cm 等單位指定外邊距
• % - 指定以包含元素寬度的百分比計(jì)的外邊距
• inherit - 指定應(yīng)從父元素繼承外邊距

提示：允許負(fù)值。

3.margin的用法

為了縮減代碼，可以在一個(gè)屬性中指定所有外邊距屬性。

margin?屬性是以下各外邊距屬性的簡寫屬性：

• margin-top
• margin-right
• margin-bottom
• margin-left

工作原理是這樣的：

① 如果?margin?屬性有四個(gè)值：

margin: 25px 50px 75px 100px;

• 上外邊距是 25px
• 右外邊距是 50px
• 下外邊距是 75px
• 左外邊距是 100px

?②?如果?margin?屬性設(shè)置三個(gè)值：

margin: 25px 50px 75px;

• 上外邊距是 25px
• 右和左外邊距是 50px
• 下外邊距是 75px?

③ 如果?margin?屬性設(shè)置兩個(gè)值：

• margin: 25px 50px;

  • 上和下外邊距是 25px
  • 右和左外邊距是 50px

?④?如果?margin?屬性設(shè)置了一個(gè)值：

margin: 25px;

• 所有四個(gè)外邊距都是 25px

⑤? auto

可以將 margin 屬性設(shè)置為?auto，以使元素在其容器中水平居中。

然后，該元素將占據(jù)指定的寬度，并且剩余空間將在左右邊界之間平均分配。

⑥ inherit

可以使子元素的margin屬性繼承父元素的margin屬性。

二、padding

1.介紹

CSS?padding?屬性用于在任何定義的邊界內(nèi)的元素內(nèi)容周圍生成空間。

通過 CSS，您可以完全控制內(nèi)邊距（填充）。有一些屬性可以為元素的每一側(cè)（上、右、下和左側(cè)）設(shè)置內(nèi)邊距。

2.基本語法及要求

CSS 擁有用于為元素的每一側(cè)指定內(nèi)邊距的屬性：

padding-top

padding-right

padding-bottom

padding-left

所有內(nèi)邊距屬性都可以設(shè)置以下值：

• length?- 以 px、pt、cm 等單位指定內(nèi)邊距
• % - 指定以包含元素寬度的百分比計(jì)的內(nèi)邊距
• inherit - 指定應(yīng)從父元素繼承內(nèi)邊距

提示：不允許負(fù)值。

3. 用法

為了縮減代碼，可以在一個(gè)屬性中指定所有內(nèi)邊距屬性。

padding?屬性是以下各內(nèi)邊距屬性的簡寫屬性：

• padding-top
• padding-right
• padding-bottom
• padding-left

工作原理是這樣的：

① 如果?padding?屬性有四個(gè)值：

padding: 25px 50px 75px 100px;

• 上內(nèi)邊距是 25px
• 右內(nèi)邊距是 50px
• 下內(nèi)邊距是 75px
• 左內(nèi)邊距是 100px

?②?如果?padding?屬性設(shè)置了三個(gè)值：

padding: 25px 50px 75px;

• 上內(nèi)邊距是 25px
• 右和左內(nèi)邊距是 50px
• 下內(nèi)邊距是 75px

③?如果?padding?屬性設(shè)置了兩個(gè)值：

padding: 25px 50px;

• 上和下內(nèi)邊距是 25px
• 右和左內(nèi)邊距是 50px

④?如果?padding?屬性設(shè)置了一個(gè)值：

padding: 25px;

• 所有四個(gè)內(nèi)邊距都是 25px

4.內(nèi)邊距和元素寬度

CSS?width?屬性指定元素內(nèi)容區(qū)域的寬度。內(nèi)容區(qū)域是元素（盒模型）的內(nèi)邊距、邊框和外邊距內(nèi)的部分。

盒子模型是指：外邊距（margin）+ border（邊框） + 內(nèi)邊距（padding）+ content（內(nèi)容）

因此，如果元素?fù)碛兄付ǖ膶挾?#xff0c;則添加到該元素的內(nèi)邊距會(huì)添加到元素的總寬度中。這通常是不希望的結(jié)果。

例如：

div {width: 300px;padding: 25px;
}

在這里，<div> 元素的寬度為 300px。但是，<div> 元素的實(shí)際寬度將是 350px（300px + 左內(nèi)邊距 25px + 右內(nèi)邊距 25px）

box-sizing:border-box屬性，padding和border的值就不會(huì)在影響元素的寬高，相當(dāng)于把padding和border的值都算在content里

若要將寬度保持為 300px，無論填充量如何，那么可以使用?box-sizing?屬性。這將導(dǎo)致元素保持其寬度。如果增加內(nèi)邊距，則可用的內(nèi)容空間會(huì)減少。

div {width: 300px;padding: 25px;box-sizing: border-box;
}