本文目錄導(dǎo)讀：

1. 外邊距（margin）的設(shè)置
2. 內(nèi)邊距（padding）的設(shè)置

CSS中的外內(nèi)邊距設(shè)置詳解

在網(wǎng)頁設(shè)計(jì)中，合理的布局和間距設(shè)置對(duì)于提升用戶體驗(yàn)和頁面美觀度***關(guān)重要，在CSS中，我們可以通過設(shè)置外內(nèi)邊距（margin和padding）來實(shí)現(xiàn)這一目的，本文將詳細(xì)介紹如何使用CSS設(shè)置外內(nèi)邊距。

外邊距（margin）的設(shè)置

外邊距用于控制元素與其周圍元素之間的距離，在CSS中，我們可以使用margin屬性來設(shè)置外邊距。

1、設(shè)置單個(gè)方向的外邊距：

margin-top: 10px;  /* 頂部外邊距 */
margin-right: 20px; /* 右側(cè)外邊距 */
margin-bottom: 15px; /* 底部外邊距 */
margin-left: 10px;  /* 左側(cè)外邊距 */

2、同時(shí)設(shè)置四個(gè)方向的外邊距：

margin: 10px 20px 15px 10px; /* 上右下左的外邊距 */

內(nèi)邊距（padding）的設(shè)置

內(nèi)邊距用于控制元素內(nèi)部元素與元素邊框之間的距離，在CSS中，我們可以使用padding屬性來設(shè)置內(nèi)邊距，與外邊距的設(shè)置類似，內(nèi)邊距也可以分別設(shè)置四個(gè)方向的間距。

1、設(shè)置單個(gè)方向的內(nèi)邊距：

padding-top: 10px;  /* 頂部內(nèi)邊距 */
padding-right: 20px; /* 右側(cè)內(nèi)邊距 */
padding-bottom: 15px; /* 底部內(nèi)邊距 */
padding-left: 10px;  /* 左側(cè)內(nèi)邊距 */

2、同時(shí)設(shè)置四個(gè)方向的內(nèi)邊距：

padding: 10px 20px 15px 10px; /* 上右下左的內(nèi)邊距 */