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

來源:互聯網
上載者:User
在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外邊距屬性與用法總結

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.