有关弥补margin-top坍塌问题

最新推荐文章于 2022-02-09 10:53:47 发布

J_1117

最新推荐文章于 2022-02-09 10:53:47 发布

阅读量115

点赞数

文章标签：静态页面布局出现坍塌问题

本文链接：https://blog.csdn.net/J_1117/article/details/101907008

版权

很多刚刚学会静态页面布局的同学会遇到margin-top坍塌的问题，这个问题只能弥补，不能解决；
例如：
以下是分别给两个层级div加上左外边距（margin-left），发现父元素的div根据body位置移动，子元素是根据父元素位置移动；
html片段

<body>
  <div class="wrapper">
    <div class="content"></div>
  </div>
</body>

css片段

*{
      margin: 0;
      padding: 0;
    }
    /*父元素*/
    .wrapper{
      margin-left: 100px;
      margin-top: 100px;
      width: 100px;
      height: 100px;
      background-color: black;
    }
    /*子元素*/
    .content{
      margin-left: 50px;
      width: 50px;
      height: 50px;
      background-color: green;
    }

运行后的画面展示：
在这里插入图片描述
更改css代码片段，在css中的子元素样式中添加小于父元素的上外边距（margin-top），子元素不会移动位置，相反的，若大于父元素的上外边距，子元素会连带父元素一起向下移动，这个就是父子元素在上外边距之间的坍塌问题。

1.父元素的上外边距大于子元素的上外边距

/*子元素*/
.content{
      margin-left: 50px;
      margin-top: 50px;   /*注意：父元素外边距100px*/
      width: 50px;
      height: 50px;
      background-color: green;
    }

在这里插入图片描述由图可见，子元素上外边距（margin-top）没有根据父元素的位置进行移动，由此可见，margin-top坍塌；

2.子元素的上外边距大于父元素的上外边距；

/*子元素*/
.content{
      margin-left: 50px;
      margin-top: 150px;    /*注意：父元素上外边距100px*/
      width: 50px;
      height: 50px;
      background-color: green;

在这里插入图片描述由图可见，父随子动；

要想解决以上情况，至今没有完全解决的，只有根据css样式进行弥补；

弥补以上出现的问题，也称如何触发一个盒子的bfc（block format context）

/*父元素*/
 .wrapper{  
      margin-left: 100px;
      margin-top: 100px;
      width: 100px;
      height: 100px;
      background-color: black;
      /*弥补margin-top出现坍塌问题的四种方法*/
      position: absolute;
      display: inline-block;
      float: left/right;
      overflow: hidden; 
    }