許多網(wǎng)頁設(shè)計(jì)師在使用CSS時(shí)，常常會(huì)遇到一個(gè)問題：當(dāng)給某個(gè)元素設(shè)置了一些CSS樣式后，這個(gè)元素會(huì)整體下移。究竟是什么原因?qū)е逻@個(gè)問題的出現(xiàn)呢？

造成元素整體下移的原因可能有多種，以下是幾種常見的情況。

/* 第一種情況：給塊級(jí)元素設(shè)置了margin-top */
p {
margin-top: 20px;
}
/* 第二種情況：給內(nèi)聯(lián)元素設(shè)置了line-height */
span {
line-height: 2;
}
/* 第三種情況：給元素設(shè)置了vertical-align */
img {
vertical-align: middle;
}

以上三種情況都可能導(dǎo)致元素整體下移。具體解決方法如下：

第一種情況：可以給該元素的父元素增加padding-top屬性，等于或者大于元素的margin-top；或者將元素改為內(nèi)聯(lián)或行內(nèi)塊元素，這樣設(shè)置的margin-top就不會(huì)影響到上面的元素。

/* 修改父元素的padding-top */
.parent{
padding-top: 20px;
}
/* 將元素改為行內(nèi)塊元素 */
p {
display: inline-block;
}

第二種情況：可以使用padding代替line-height，或者將該元素改為塊級(jí)元素。

/* 使用padding代替line-height */
span{
padding: 0 5px;
line-height: normal;
}
/* 將元素改為塊級(jí)元素 */
span{
display: inline-block;
}

第三種情況：可以給父元素設(shè)置font-size:0,或者將元素改為塊級(jí)元素。

/* 給父元素設(shè)置font-size:0 */
.parent {
font-size: 0;
}
/* 將元素改為塊級(jí)元素 */
img {
display: block;
}

以上就是可能導(dǎo)致元素整體下移的三種情況以及解決辦法，通過這些方法，我們可以更加準(zhǔn)確地進(jìn)行頁面制作，解決這類問題。