外边距的特殊情况

最新推荐文章于 2024-08-09 11:41:07 发布

crystal_iwwish

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量100

点赞数

分类专栏：前端学习之CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/crystal_iwwish/article/details/120254753

版权

前端学习之CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

外边距的几种情况

▶正常情况：水平布局的盒子，左右margin正常，互不影响，最终两者的距离就是左右margin的和

▶外边距折叠-1）
合并现象：垂直布局的盒子，上下的margin会合并，最终两者的距离为margin的最大值
在这里插入图片描述

▶外边距折叠-2）
塌陷现象：：互相嵌套的块级元素，子元素的margin-top会作用在父元素身上，导致父元素一起往下移动
在这里插入图片描述

 <style>
      body {
        background-color: #8df;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .box1 {
        width: 100px;
        height: 100px;
        margin-top: 30px;
        background-color: orange;
      }
  </style>

</head>
  <body>
    <div class="box">
      <div class="box1"></div>
    </div>
  </body>
</html>

crystal_iwwish

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
外边距的特殊情况

外边距的几种情况▶正常情况：水平布局的盒子，左右margin正常，互不影响，最终两者的距离就是左右margin的和▶外边距折叠-1）合并现象：垂直布局的盒子，上下的margin会合并，最终两者的距离为margin的最大值▶外边距折叠-2）塌陷现象：：互相嵌套的块级元素，子元素的margin-top会作用在父元素身上，导致父元素一起往下移动 <style> body { background-color: #8df; } .bo
复制链接

扫一扫

专栏目录