margin-top影響父元素定位

桔子_Lynn發表於2017-01-11

寫樣式時無意中發現margin-top會影響到父元素的定位，下面是示例：

HTML程式碼：

<div class="demo">
   <div class="inner">
      子元素
   </div>
</div>

CSS程式碼：

.demo{
  width: 100%;
  height: 100%;
  background: #a4c1de;
}
.inner{
  width: 200px;
  height: 200px;
  background: #b0f3e4;
  margin-top: 30px;
}

效果如下：

 

如上圖所示：在子元素設定了margin-top=30px時，父元素會掉落30px,而子元素和父元素並沒有拉開30px的差距。

網上查了一些資料：

原因是：原因是根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊。

找到了原因那問題就方便解決啦，下面是解決辦法：

1. 給父元素增加屬性：overflow:hidden;

2. 給父元素增加邊框，如果不需要邊框則加一個透明邊框，不會影響到樣式

3. 可以用父元素的padding-top來代替子元素的margin-top

4. 給父元素新增屬性 position：absolute

下面是解決之後的樣式：

 

by 新手小白的記錄

 

相關文章