解决子div设置margin-top使父div也跟着向下移动的问题

た 入场券 2023-08-17 16:49 127阅读 0赞

直接看代码

  • html：



  • css

    body{

    1.            margin:0;
    2.         padding:0;
    3.            }
    4.    .main{
    5.            width:200px;
    6.            height:200px;
    7.            background:tomato;
    8.            }
    9.    .content{
    10.           margin-top: 30px;
    11.           width:100px;
    12.           height:100px;
    13.           background:skyblue;
    14.            }

原图

在这里插入图片描述
给子元素设置margin-top: 30px之后：
在这里插入图片描述

  • 原理
    一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
  • 解决方案
    在这里插入图片描述
    1.为父div设置border,我为父div设置border-top:1px solid tomato,理论上还得让父元素高度减去1px;
    2.为父div设置padding-top:1px,理论上还得让父元素高度减去1px;
    3.为父div设置overflow: hidden;(推荐使用这个)

发表评论

表情：
评论列表 （有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读