常见margin塌陷问题及其解决办法

最新推荐文章于 2024-02-18 21:45:45 发布

斑斓小星愿

最新推荐文章于 2024-02-18 21:45:45 发布

阅读量447

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/sunshineln/article/details/114928838

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：当两个盒子在垂直方向上设置margin值时会出现塌陷的现象。

兄弟盒子垂直并列

<!DOCTYPE HTML>
<html>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box1 {
    width: 100px;
    height: 100px;
    background: yellowgreen;
    margin-bottom: 20px;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background: skyblue;
    margin-top: 30px;
  }
</style>

</html>

渲染的结果
在这里插入图片描述

我们在看到现象之前会不会觉得两个盒子的间距是50px，然而却不是。
两盒子之间的距离仅是30px，我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。

嵌套关系(父级元素塌陷)

<!DOCTYPE HTML>
<html>

<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box1 {
    width: 200px;
    height: 200px;
    background: yellowgreen;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background: skyblue;
    margin-top: 10px;
  }
</style>

</html>

渲染结果
在这里插入图片描述
子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）
解决的办法：
父盒子：

设置透明边框 border: 1px solid transparent;
溢出盒子的部分隐藏展示 overflow: hidden;
设置定位 position:absolute;
设置成行块级元素 display: inline-block;
利用浮动来改变样式 float: left;

	/* 设置透明边框 */
    /* border: 1px solid transparent; */
    /* 溢出盒子的部分隐藏展示 */
    /* overflow: hidden; */
    /* 设置相对定位 */
    /* position:absolute; */
    /* 设置成行块级元素 */
    /* display: inline-block; */
    /* 利用浮动来改变样式 */
    /* float: left; */

斑斓小星愿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见margin塌陷问题及其解决办法

问题：当两个盒子在垂直方向上设置margin值时会出现塌陷的现象。兄弟盒子垂直并列<!DOCTYPE HTML><html><body> <div class="box1"></div> <div class="box2"></div></body><style> * { margin: 0; padding: 0; } .box1 { wid
复制链接

扫一扫

专栏目录