CSS 設置外邊距

提問人：劉團圓發(fā)布時間：2020-11-18

設置外邊距最簡單的方法就是使用margin屬性，如表所示。margin邊界環(huán)繞在元素的content區(qū)域四周。如果margin的值為0，則Jmargin邊界與border邊界重合。這個筒寫屬性是設置一個元素所有外邊距的寬度，或者設置各邊的外邊距的寬度。

該屬性接收任何長度單位，可以是像素、毫米、厘米、em等，也可以設置為auto (自動）。常見的做法是為外邊距設置長度值，允許使用負值。

margin:10px 5px 15px 20px;

在以上代碼中，margin的值是按照上、右、下、左的順序進行設置的，即從上邊距開始按照順時針方向旋轉。上外邊距是10px,右外邊距是5px,下外邊距是15px,左外邊距是20px。

margin:10px 5px 15px;

在以上代碼中，上外邊距是10px,右外邊距和左外邊距是5px,下外邊距是15px。

margin:1Opx 5px:

在以上代碼中，上外邊距和下外邊距是10px,右外邊距和左外邊距是5px。

margin:1Opx:

在以上代碼中，上下左右邊距都是10px。

下面通過一個實例更加直觀地了解margin屬性。

【例題】使用margin屬性

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

width: 100px;

height: 100px;

border:2px red solid;

}

.d2{

/*margin-top: 20px;

margin-right: auto;

margin-bottom: 40px;

margin-left: 10px;*/

margin:20px auto 40px 10px;

}

</style>

</head>

<body>

</body>

</html>

相關視頻回答

回復(0)