子元素設置margin-top後，父元素跟隨下移的問題

時間 2019-11-18

標籤元素設置 margin 跟隨下移問題欄目 CSS 简体版

原文原文鏈接

子元素設置margin-top後，父元素跟隨下移的問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      background: blue;
      width: 200px;
      height: 200px;

    }
    p{
      background: red;
      width: 50px;
      height: 50px;
      margin-top: 30px;
    }
  </style>
</head>
<body>
<div>
  <p></p>
</div>
</body>
</html>

div沒有margin-top:30px，可是頁面上顯示的結果確是像margin-top應用到了div上通常，div下移而p沒有。
緣由是由於css

當一個元素包含在另外一個元素中時，假設沒有內邊距padding或邊框border把外邊距分隔開，它們的上和/或下外邊距也會發生合併。請看下圖html

再說了白點就是：父元素的第一個子元素的上邊距margin-top若是碰不到有效的border或者padding.就會不斷一層一層的找本身「領導」(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就能夠有效的管制這個目無領導的margin防止它越級，假傳聖旨，把本身的margin當領導的margin執行。
對於垂直外邊距合併的解決方案上面已經解釋了，爲父元素增長一個border-top或者padding-top便可解決這個問題。（引用https://www.hicss.net/do-not-tell-me-you-understand-margin/這篇文章的話）.net

div{
      background: blue;
      width: 200px;
      height: 200px;
      border-top: 1px solid #ccc;//新增
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。