1. 程式人生 > >子DIV塊中設定margin-top時影響父DIV塊位置問題

子DIV塊中設定margin-top時影響父DIV塊位置問題

相信很多前端同學在做頁面開發的時候都遇到過這樣的問題。給一個div內部的div設定一個margin-top,結果它的父級跟著它一起下移了。如下面的程式碼

.a {
    width:100px;
    height:100px;
}
.b {
    width:50px;
    height:50px;
    margin-top:10px;
}

<div class="a">
    <div class="b"></div>
</div>

效果是這樣的

但是其實我們期望的效果是這樣的

為什麼會產生這樣的效果呢?這要談到css的盒模型margin的合併問題

css在盒模型中規定

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗鄰的兩個或更多盒元素的margin將會合併為一個margin共享之。毗鄰的定義為:同級或者巢狀的盒元素,並且它們之間沒有非空內容、Padding或Border分隔。

其實很多小夥伴都知道css有這樣一個規定。只是我們只關注了相鄰div之間的margin合併而沒有考慮父級和子集的合併。我們一定要注意,巢狀也屬於毗鄰的喲。

那麼怎麼解決這個問題呢?這裡提供這樣幾種方法:

  • 讓父級具有“包裹性”
  • 將父級over-flow設為hidden
  • 將父級display設為inline-block
  • 將父級float或absolute
  • 改變父級的結構
  • 給父元素設定padding
  • 給父元素設定透明border

相關推薦

div設定margin-top影響div位置的解決辦法及其原因

解決辦法①: 若子DIV塊中使用margin-top,則在父DIV塊中新增:overflow:hidden; 解決辦法②: 在子DIV塊中用padding-top代替margin-top。 有個叫 bfc 的東西 叫 塊級元素格式化上下文 overflow hidden 或者描邊可以觸發 bf

DIV設定margin-top影響DIV位置問題

相信很多前端同學在做頁面開發的時候都遇到過這樣的問題。給一個div內部的div設定一個margin-top,結果它的父級跟著它一起下移了。如下面的程式碼.a { width:100px; height:100px; } .b { width:50px; height:50px;

DIV設定margin-top影響DIV位置的解決辦法

在文章《實現文字滾動》中子DIV塊#main中設定margin-top時,若父DIV塊#box中沒有“overflow:hidden;”,則子DIV塊中margin-top會影響父DIV塊的位置 解決辦法1: 若子DIV塊中使用margin-top,則在父DIV塊中新增:overflow:hidden; 解

如何解決div設定margin-top影響divmargin-top

測試程式碼如下: <!DOCTYPE html> <html> <head><title></title><style type="text/css">.container{width: 50%;mar

級元素設的margin-top會超出級的範圍

垂直方向會出現這個問題,水平方向不會出現! 解決方法為給子元素新增浮動或者加padding-top取代margin-top webstorm: .footer_logo{ font-size

解決:div設定margin-top使得div也跟著向下移動

 之前在寫網頁的時候,發現一個小問題,就是子div設定margin-top的時候,父的div也會跟著向下移動。我用程式碼和圖描述一下問題: <style> *{margin:0;pad

DIV設定margin-top影響DIV位置

<pre name="code" class="html"><style type="text/css" media="screen"> *{margin: 0;padding: 0;} .pare{width: 600px;height:

css-div設置margin-top影響div

元素 ima img 設置 alt gin mar mage 如果 父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己父元素,祖先元素,所有需要在父元素設置border,或者paddingcss-子di

關於內層DIV設定margin-top不起作用的解決方案

關於內層DIV設定margin-top不起作用的解決方案 閱讀目錄 關於內層DIV設定margin-top不起作用的解決方案 回到頂部 關於內層DIV設定margin-top不起作用的解決方案 (一) 近日在做另外一個站點的時候,又遇到這個問題,決定好好的研究

為什麼元素設定margin-top會作用在元素上?

原因在於:CSS 外邊距合併 復現: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

css:元素設定margin-top元素會跟著移動(margin塌陷)

程式碼如下: 效果如圖: 這種情況成為margin塌陷:父子元素的margin-top屬性,會共用值最大的那個。所以父元素公用了子元素的margin-top值,自然也就跟著移動了。 解決方法:bfc 觸發bfc的方法有以下幾種: position:absolute; disp

元素設定margin-top影響級元素的位置(轉發)

前提:子元素要是塊級元素; ——————————————————————————————————— 相信很多前端同學在做頁面開發的時候都遇到過這樣的問題。給一個div內部的div設定一個margin-top,結果它的父級跟著它一起下移了。如下面的程式碼     .a {

元素設定margin-top會作用在元素上?如何解決呢

在實戰中發現子級在父級中設定margin-top的時候,會失效,而會附加在父級上,相信大家也會遇到過這種情況,那這是怎麼回事呢?要如何解決呢?那麼我們看一下例子吧: HTML程式碼: <body> <div> <p></p&

設定margin-top,溢位到元素

給子元素margin-top時,若這個子元素前面沒有其他內容,這個margin-top值會應用到父元素上 解決方案,給父元素設定:before body:before{ content: ""; display: table; /*或者d

為您解惑:關於內層DIV設定margin-top不起作用的解決方案。。。

<span style="font-size:14px;">//程式碼如下: <div>上層</div> <div> <!--父層-->   <div style="margin-top:40

行內元素和級元素:內聯(行級)元素不能設定margin-top

內聯(行級)元素 不能設定寬高,但padding屬性可以設定,需要注意的是行級元素不能設定margin-top和margin-bottom屬性,但可以設定margin-left和margin-right屬性。如果需要設定行級元素的margin-top或margin-botto

為什麼第一個子元素設定margin-top元素會跟著移動(附解決方案)

問題: 有時當我們設定子元素的margin-top,但是卻發現子元素沒有出現上外邊距的效果,反而是父元素出現了上外邊距的效果。 原因: 邊距重疊:一個盒子和其子孫的邊距重疊。根據規範,一個盒子如果沒有上補白和上邊框,那麼它的上邊距應該和其文件流中的第一個孩子元素

MyEclipse設定開發專案使用的預設JDK

安裝好MyEclipse之後,在MyEclipse中開發專案時,預設使用的是MyEclipse是自帶的JDK,如下圖所示:      如果我們需要使用自己安裝好的JDK,那麼就需要在MyEclipse中重新設定,設定步驟如下:   Window→Preferences      彈出【Prefere

android 適配dpi框架在程式碼設定TextView setTextSize的使用

我這裡用的是阿杜的dpi適配框架,DisplayUtil是常見的單位轉換工具類,可自行搜尋 TextView .setTextSize()方法傳入的是sp值 檢視原始碼  /**      * S

如何在java程式碼設定margin屬性

但是有些情況下,需要在java程式碼裡來寫,可是View本身沒有setMargin方法,怎麼辦呢?   通過查閱android api,我們發現android.view.ViewGroup.MarginLayoutParams有個方法setMargins(left, top, right, bottom)