位置：首頁(yè) > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 設(shè)置外邊距

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

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

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

厲性

定義

margin

簡(jiǎn)寫厲性，在一個(gè)聲明中設(shè)置所有外邊距的屬性

margin—top

設(shè)置元素的上邊距

margin—right

設(shè)置元素的右邊距

margin—bottom

設(shè)置元素的下邊距

margin—left

設(shè)置元素的左邊距


    margin:10px 5px 15px 20px;

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

    margin:10px 5px 15px;

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

    margin:1Opx 5px:

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

    margin:1Opx:

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

    下面通過一個(gè)實(shí)例更加直觀地了解margin屬性。

    【例題】使用margin屬性

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<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>

<div></div>

<div></div>

<div></div>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部