首頁 > web前端 > css教學 > css margin-top使用中常遇到的問題總結

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

伊谢尔伦
發布: 2017-06-01 13:10:09
原創
2826 人瀏覽過

在css樣式中,margin-top 屬性設定元素的上外邊距。它可以允許使用負值。預設定義固定的上外邊距的值是 0。所有主流瀏覽器都支援 margin-top 屬性。透過本文我們來具體的說一說在前端頁面中使用margin-top 屬性經常遇到的一些問題,如設定後影響到了父元素怎麼辦?使用了margin-top 屬性沒有起作用該如何解決?等等。

一、margin-top設定後影響到了父元素怎麼辦?

1. 如何解決margin折疊從子元素margin-top影響父元素引出的問題

css 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失效的原因與解決方法

css 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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板