css margin-top使用中常遇到的問題總結

在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都有上下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外邊距屬性與用法總結#### ################

以上是css margin-top使用中常遇到的問題總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！