CSS中的外邊距（Margins）是什麼意思？

CSS中最常用的布局屬性包括外邊距（margins）、內邊距（padding）和邊框（border）。本文將著重介紹外邊距的相關知識。

一、外邊距是什麼

在CSS中，外邊距定義了元素之間的距離。也就是說，外邊距是指元素周圍的空白區域，用來控制元素與其周圍元素之間的距離。

舉個例子，如果我們想在文本周圍添加一些空白區域，可以使用

margin屬性

。假設我們有一段段落文本：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum mi ac ipsum facilisis rutrum. Vivamus quis faucibus magna. Proin in ipsum dapibus, facilisis lacus in, gravida turpis. Sed rutrum euismod odio, vel consectetur enim fringilla et. Sed et justo fermentum, lobortis odio eget, varius neque. Aliquam volutpat est diam, vel lacinia elit suscipit sed. Aenean fringilla magna ut risus congue, nec scelerisque enim fringilla. Curabitur nunc lorem, sagittis non metus at, dictum rutrum leo. Integer nec nisl magna.

如果我們想在段落周圍添加一些空白，可以使用以下CSS代碼：

p{
  margin: 10px;
}

這將會為段落元素添加10px的外邊距，從而讓文本與周圍的元素保持距離。

二、外邊距的屬性

在使用外邊距之前，我們需要了解一些常用的外邊距屬性：

• margin-top：上外邊距
• margin-bottom：下外邊距
• margin-left：左外邊距
• margin-right：右外邊距

這四個屬性分別對應元素的上、下、左、右四個方向。我們可以使用這些屬性來為元素定義外邊距：

p{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

這將會為段落元素定義上下10px、左右20px的外邊距。

三、外邊距的值

除了上述四個外邊距屬性，我們還可以為元素定義一個複合外邊距屬性，即margin屬性。

margin屬性可以同時定義上、下、左、右四個外邊距的值，並且還可以使用一些特殊的值：

• auto：自動計算外邊距值
• inherit：繼承父元素的外邊距值

例如，要為元素定義左右居中的外邊距，可以使用以下CSS代碼：

div{
  width: 200px;
  margin: 0 auto;
}

這將會使DIV元素水平居中，並保持左右相等的外邊距。

四、外邊距的影響

外邊距不僅可以控制元素與周圍元素的距離，還可以影響元素本身的大小。也就是說，當我們為元素定義外邊距時，實際上是在改變元素的盒模型。

例如，當我們為一個元素定義了10px的外邊距時，實際上是將元素的總寬度增加20px（兩側各加10px）。因此，如果我們希望元素佔據指定的寬度，需要將其寬度減去外邊距的值。

div{
  width: 200px;
  margin: 10px;
  /* 實際寬度為220px */
  /* 需要將其寬度減去外邊距的值 */
  box-sizing: border-box;
}

可以看到，為了讓元素佔據指定的寬度，我們需要使用CSS3的box-sizing屬性。該屬性可以讓元素的寬度包括內邊距和邊框，而不是只包括內容區域。

五、總結

外邊距是CSS中控制元素間距和影響元素盒模型的重要屬性。我們可以使用上述介紹的外邊距屬性和值，為元素定義不同的外邊距大小和位置，從而實現各種各樣的布局效果。