CSS中設(shè)置間隔相等十分常見(jiàn)，主要是為了讓網(wǎng)頁(yè) UI 的排版更加美觀舒適。以下是如何實(shí)現(xiàn)在同一元素上進(jìn)行間隔的幾種方法。

/* 設(shè)置 margin */
.element {
margin-right: 10px;
}
/* 設(shè)置 padding */
.element {
padding-right: 10px;
}
/* 設(shè)置 border     可能會(huì)導(dǎo)致元素尺寸變大 */
.element {
border-right: 10px solid transparent;
}

上述方法中，最常用的是 margin 和 padding。二者的區(qū)別是 margin 是在元素的外部，padding 是在元素的內(nèi)部， 因此如果想要讓元素的大小和外觀保持不變，可以通過(guò) box-sizing 屬性進(jìn)行改變(該屬性將計(jì)算 width 和 height 屬性中包含的 padding 和 border 的值)。以下是如何實(shí)現(xiàn)：

/* 設(shè)置 margin */
.element {
box-sizing: border-box;
margin-right: 10px;
}
/* 設(shè)置 padding */
.element {
box-sizing: border-box;
padding-right: 10px;
}

最后，更加靈活的做法是：使用通配符 * 設(shè)置元素的 margin 和 padding 值。

* {
margin: 0;
padding: 0;
}

通過(guò)這樣設(shè)置，可以讓所有元素的 margin 和 padding 值為 0，可以有效消除 CSS 默認(rèn)樣式的影響。