margin-top(bug)最好用的解决办法

最新推荐文章于 2021-10-18 19:28:02 发布

冲冲冲冲fyx

最新推荐文章于 2021-10-18 19:28:02 发布

阅读量408

点赞数

文章标签： html

本文链接：https://blog.csdn.net/mengniumeiwoniu/article/details/114753217

版权

当一个父元素的盒子，有一个子元素盒子，给子元素盒子设置margin-top的时候，会出先margin的bug，这个margin-top会设置在父元素盒子上,怎么才能设置在子元素的盒子上
解决办法：
父元素盒子前加上一个伪类::before{content="";display=“table”}就能完美的解决问题的所在

 <style>
        *{
            margin: 0;
            padding: 0;
        }
       .father{
           width: 200px;
           height: 200px;
           background-color: red;
       }
       .son{
           width: 100px;
           height: 100px;
           background-color: yellow;
           margin-top: 10px;
       }
       .father::before{
           content: " ";
           display: table;
       }
    </style>
</head>
<body>
  <div class="father">
      <div class="son"></div>
  </div>
</body>