CSS 中的 margin 屬性可以為元素設置外邊距，其可以用於調整元素與周圍元素之間的距離，從而改變頁面的布局和樣式。下面我們將從多個方面進行詳細闡述如何在 CSS 中添加 margin。
一、margin 介紹
margin 指的是外邊距，是元素距離周圍元素的距離。在 CSS 中，我們可以通過設置 margin 屬性來調整元素的外邊距。
二、margin 的使用方法
margin 可以為所有 HTML 元素設置外邊距。例如：
/*上下左右外邊距都為10像素*/ margin: 10px;
可以為不同方向的外邊距設置不同的值。這裡有四個值分別表示順序為：上、右、下、左：
/*上下外邊距為10像素，左右外邊距為5像素*/ margin: 10px 5px;
也可以分別設置。這裡的四個值分別表示順序為：上、右、下、左：
/*上外邊距為10像素，右外邊距為5像素，下外邊距為15像素，左外邊距為20像素*/ margin-top: 10px; margin-right: 5px; margin-bottom: 15px; margin-left: 20px;
三、margin 的值
margin 的值可以是長度值、百分數和 auto。
長度值：margin 的長度值可以是數字，也可以是帶單位的值（如：10px、2em 等）。這裡需要注意的是，如果只設置了一個值，那麼四個方向都會應用相同的外邊距；如果設置了兩個值，那麼第一個值將應用於上下邊距，第二個值將應用於左右邊距；如果設置了三個值，那麼第一個值將應用於上邊距，第二個值將應用於左右邊距，第三個值將應用於下邊距；如果設置了四個值，那麼分別對應順序為上、右、下、左的邊距值。
百分數：margin 的百分數值是相對於包含元素的寬度計算的，例如，設置一個20%的 margin，將使用包含元素的寬度的 20% 作為元素的外邊距。
auto：auto 可以用於水平居中和垂直居中。例如，可以通過設置 margin-left 和 margin-right 為 auto 將一個塊級元素水平居中。
四、樣例代碼演示
下面是一個 margin 樣例代碼及運行效果。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 50px;
background-color: #f0f0f0;
text-align: center;
}
p {
margin: 20px;
}
.box {
margin: 0 auto;
width: 200px;
height: 200px;
background: #ccc;
}
</style>
</head>
<body>
<h1>Margin 樣例代碼</h1>
<p>Margin 可以設置為所有 HTML 元素的外邊距，使用 margin-top、margin-bottom、margin-left 和 margin-right 設置元素的上、下、左、右外邊距。例如，這裡的文字上下左右都設置了 20px 的 margin。</p>
<div class="box">
<p>這是一個塊級元素，可以通過設置 margin-left 和 margin-right 為 auto，將其水平居中。</p>
</div>
</body>
</html>
原創文章，作者：QVOY，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/132554.html
微信掃一掃 
支付寶掃一掃 