在網(wǎng)頁(yè)開(kāi)發(fā)中，CSS（層疊樣式表）是非常重要的一個(gè)部分，盒模型是其中一個(gè)基礎(chǔ)概念，它描述了一個(gè)元素所占據(jù)的空間。

盒模型主要由四個(gè)屬性構(gòu)成：content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。

/* 盒模型示意圖 */
+-----------------------+
|       margin-top       |
+-----------------------+
|       border-top       |
|        padding-top     |
|          content      |
|        padding-bottom  |
|       border-bottom    |
+-----------------------+
|      margin-bottom     |
+-----------------------+

1. content（內(nèi)容）

這個(gè)屬性定義了元素所占據(jù)的空間，即元素的寬度和高度。

/* 設(shè)置寬度和高度 */
div {
width: 200px;
height: 100px;
}

2. padding（內(nèi)邊距）

這個(gè)屬性定義了元素內(nèi)容和邊框之間的空間。

/* 設(shè)置上下左右內(nèi)邊距 */
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
/* 快捷方式，上下和左右一樣 */
div {
padding: 10px 20px 30px 40px;
}

3. border（邊框）

這個(gè)屬性定義了元素周圍的邊框。

/* 設(shè)置上下左右邊框 */
div {
border-top: 1px solid black;
border-right: 2px dotted red;
border-bottom: 3px double blue;
border-left: 4px dashed green;
}
/* 快捷方式，上下左右一樣 */
div {
border: 1px solid black;
}

4. margin（外邊距）

這個(gè)屬性定義了元素與其它元素之間的空間。

/* 設(shè)置上下左右外邊距 */
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/* 快捷方式，上下左右一樣 */
div {
margin: 10px 20px 30px 40px;
}