子元素设置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;//新增
    }