margin问题，CSS显示模式

最新推荐文章于 2024-07-25 10:45:42 发布

照一江明月

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量153

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/w8666999/article/details/127175497

版权

一、margin

1.1 盒子塌陷

结构关系：嵌套，一个大盒子包裹一个小盒子
问题描述：当父元素没有上内边距或上边框时如果给子元素设置了上外边距，其结果不是子元素上面距父元素上面有距离而是父元素距上面有距离。也就是说给子盒子设置上外边距其值会给到父元素。如果子元素和父元素都设置了上外边距，如果是正值会取两者中较大值作用于父元素，如果是负值会取绝对值较大的值作用于父元素。
表现：父子元素公用一个上外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .warp{
            width: 300px;
            height: 300px;
            background: #f67000;
            margin: 0 auto;
        }
        .inner{
            width: 200px;
            height: 200px;
            background: #ff0000;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="inner"></div>
    </div>
</body>
</html>

解决方法
- 给父元素设置边框或内边距（慎用）
- 给父元素设置overflow: hidden;改变规则

1.2、盒子重叠

结构关系：相邻元素垂直外边距合并
问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇，会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：两个外边距合并成一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #009cf6;
        }
        .box1{
            width:100px;
            height:100px;
            background-color:red;
            margin-bottom:100px;
        }
        .box2{
        width:100px;
        height:100px;
        background-color:green;
        margin-top:100px;
        }
    </style>
</head>
<body>
    
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>