溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)Css中如何合并外邊距，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一般發(fā)生外邊距合并主要有以下三種情況：
1.相鄰兄弟姐妹元素
兩個兄弟元素之間的外邊距，會取兩個元素外邊距的最大值。
<p style="margin-bottom: 30px;">這個段落的下外邊距被合并...</p><p style="margin-top: 20px;">...這個段落的上外邊距被合并。</p>
按照上面的例子可以得出，兩個p元素之間距離為30px。
2.父元素和子元素
這種情況又可以分為以下兩種：
父元素的上外邊距和第一個子元素的上外邊距
父元素的下外邊距和最后一個子元素的下外邊距
這兩種情況，最終顯示出來的結(jié)果都是取二者中的最大值。
3.空元素
自己的上外邊距會和自己的下外邊距合并
<p style="margin-bottom: 0px;">這個段落的和下面段落的距離將為20px</p><div style="margin-top: 20px; margin-bottom: 20px;"></div><p style="margin-top: 0px;">這個段落的和上面段落的距離將為20px</p>
這樣第一個p元素和第三個p元素之間距離為20px
阻止合并方法：
通用方法
處于靜態(tài)流元素會發(fā)生合并，所以float和position:absolute都不會發(fā)生合并
設(shè)置為inline-block ，也不會發(fā)生合并
針對于父元素和子元素情況不合并方法
以下都不會發(fā)生合并
設(shè)置了清除浮動屬性
因為margin需要直接接觸才能合并，所以父元素或子元素中有border或padding，或者二者之間有元素
注意：如果兩個外邊距值中有一個為0，也會發(fā)生合并。
如果有負外邊距，合并后外邊距為最大正邊距加上最小負邊距（絕對值最大的一個），如上面元素下邊距為20px，下面元素上邊距為-20px，則最后為0px
關(guān)于“Css中如何合并外邊距”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
