margin重叠和塌陷的问题和行内块出现间隙

最新推荐文章于 2024-09-12 21:29:38 发布

qq_33221699

最新推荐文章于 2024-09-12 21:29:38 发布

阅读量483

点赞数

分类专栏： html+css学习心得

本文链接：https://blog.youkuaiyun.com/qq_33221699/article/details/84666794

版权

html+css学习心得专栏收录该内容

15 篇文章

订阅专栏

本文探讨了CSS布局中常见的三个问题：margin重叠、margin塌陷及inline-block元素间的空格问题，并提供了详细的解决方案，包括使用display:inline-block、添加边框、overflow:hidden等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.解决margin重叠的问题（两个盒子之间设置margin出现重叠）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background: pink;
            margin-bottom: 50px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background: yellow;
            margin-top: 80px;
            /* display: inline-block; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

给后面的div类型转换：display:inline-block;

2.margin塌陷(问题，一个大盒子里面有个小盒子，给小盒子添加margin-top,大盒子也会跟着往下移)

解决办法：
（1）给父元素添加边框
（2）给父元素添加overflow：hidden
（3）给父元素或者子元素添加浮动

3.如果把块元素设置为inline-block元素与元素之间有空格，这个空格是因为解析的时候会把标签换行当成一个字符

怎么解决：（1）把所有标签写在同一行，而且之间没有空格
（2）给父元素设置font-size：0,但是注意要给自己设置字体大小