為什麼margin-top對父元素有效

antzone發表於2017-04-03

可能不少朋友遇到過這樣的問題，那就是當對元素新增margin-top的時候，對於本元素沒有效果，但是對父元素卻產生的影響，下面就介紹一下為什麼會產生這種情況和解決此種問題。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box {
  width:300px;
  height:200px;
  background:#ccc;
}
#antzone {
  width:100px;
  height:100px;
  background:red;
  margin-top:50px;
}
</style>
</head>
<body>
<div id="box">
  <div id="antzone"></div>
</div>
</body>
</html>

上面的程式碼中，雖然給子元素新增了上外邊距，但是好像對它沒有作用，反而是對父元素有作用。

解決此問題可以為父元素新增如下屬性即可:

[CSS] 純文字檢視 複製程式碼
overflow:hidden;

之所以產生這種情況是由於外邊距合併導致，具體可以參閱margin外邊距合併詳解一章節。

相關文章