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

最新推荐文章于 2023-04-17 15:26:02 发布

qq_33221699

最新推荐文章于 2023-04-17 15:26:02 发布

阅读量409

点赞数

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

本文链接：https://blog.csdn.net/qq_33221699/article/details/84666794

版权

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

15 篇文章 0 订阅

订阅专栏

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,但是注意要给自己设置字体大小

qq_33221699

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
margin重叠和塌陷的问题和行内块出现间隙

1.解决margin重叠的问题（两个盒子之间设置margin出现重叠） &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&
复制链接

扫一扫