在css樣式中,margin-top 屬性設定元素的上外邊距。它可以允許使用負值。預設定義固定的上外邊距的值是 0。所有主流瀏覽器都支援 margin-top 屬性。通過本文我們來具體的說一說在前端頁面中使用margin-top 屬性經常遇到的一些問題,如設定後影響到了父元素怎麼辦?使用了margin-top 屬性沒有起作用該如何解決?等等。
一、margin-top設定後影響到了父元素怎麼辦?
1. 如何解決margin摺疊從子項目margin-top影響父元素引出的問題
原理:margin摺疊(Collapsing Margins)
毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距。這裡的毗鄰指沒有上下padding-top,padding-bottom,border-top,border-bottom,元素內容不為空白。
最常見的margin摺疊是<p>元素並列時,每個p都有上下1em的margin,但相臨的p只會顯示1em的間隔而不是2em。
2. css子項目的margin-top為何會影響父元素
解決辦法比較多:
1)給父級加overflow:hidden或padding、border;
2)使用padding代替margin
3. 子項目增加margin-top會增加給父元素的問題
子項目的margin-top並沒有使子項目與父元素分開,反倒效果等同於給父元素加了一個margin-top;
解決的方法也有,具體為:
1)修改父元素的高度,增加padding-top樣式類比(padding-top:1px;)
2)為父元素添加overflow:hidden;
3)為父元素或者子項目生命元素浮動(float:left;可用但是不推薦)
4)為父元素添加border(border:1px solid transparent)
5)為父元素或者子項目聲明絕對位置
6)給父元素增加內容產生#father:before{content:' ';display:table};
二、使用了margin-top 屬性沒有起作用該如何解決?
1. firefox margin-top失效的原因與解決辦法
浮動的區塊層級元素的margin-bottom總是與它後面的浮動塊級兄弟元素(floated next in-flow block-level sibling)的margin-top相鄰,除非那個同級元素使用了清除操作。
浮動的區塊層級元素的margin-top和它的第一個浮動塊級子項目(floated first in-flow block-level child)的margin-top相鄰(如果該元素沒有border-top,沒有padding-top,並且子項目沒有使用清除操作)。
2. margin-top失效, css + div 布局之 CSS盒模型 外邊距合并問題
在常規文檔流中,2個或以上的塊級盒模型相鄰的垂直margin會被摺疊。最終的margin值計算方法如下:
a、全部都為正值,取最大者;
b、不全是正值,則都取絕對值,然後用正值減去最大值;
c、沒有正值,則都取絕對值,然後用0減去最大值。
3. css margin-top屬性不起作用的幾個原因
原因一: 外邊距合并margin-top屬性失效。
原因二: 子項目和父元素也可能會導致設定的子項目上外邊距失效情況
margin-top屬性相關問答
1. 請教margin-top問題
2. css大div裡面放小div,小div設定margin-top屬性,為什麼大div也飄起來了,有圖
3. 子項目設定margin-top為什麼會作用在父元素上?
【相關推薦】
1. css margin外邊距屬性與用法總結