margin值穿透及合并问题

北卿瑜

已于 2023-02-28 21:21:27 修改

阅读量193

点赞数

分类专栏： css 文章标签：前端 html javascript Powered by 金山文档

于 2023-02-28 21:06:37 首次发布

本文链接：https://blog.csdn.net/weixin_44358189/article/details/129269701

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

穿透问题描述：

外边大盒子不设置padding-top或者border-top,只给小盒子设置margin-top，外边大盒子会随着小盒子下掉

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin值穿透问题</title>
    <style>
        .parent{
            width: 300px;
            height: 300px;
            background-color: rgb(175, 28, 243);
        }
        .child{
            width: 100px;
            height: 100px;
            margin: 20px auto;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器效果如下：

如上图，只给大盒子设置了宽高，然后给小盒子设置宽高在设置margin值时，下间距和左右间距不影响，但是上间距导致大盒子随着一起掉下来了。

解决方法：

给大盒子添加overflow: hidden;

给大盒子设置上边框border-top: 1px solid transparent;

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin值穿透问题</title>
    <style>
        /* 
        描述：
        外边大盒子不设置padding-top或者border-top,只给小盒子设置margin-top，外边大盒子会随着小盒子下掉
        */
        .parent{
            width: 300px;
            height: 300px;
            /* 
                第一种方法给大盒子添加：
                overflow: hidden; 
            */
            /* 
                第二种方法给大盒子添加：
                border-top: 1px solid transparent;
            */
            border-top: 1px solid transparent; 
            background-color: rgb(175, 28, 243);
        }
        .child{
            width: 100px;
            height: 100px;
            margin: 20px auto;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器效果：

合并问题描述：

上下两个盒子box1和box2,给上box1设置了margin-bottom,给box2设置了margin-top,它俩中间值是是多少？

解决：

取最大的那个

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin值穿透问题</title>
    <style>
        /* 
        描述：
        外边大盒子不设置padding-top或者border-top,只给小盒子设置margin-top，外边大盒子会随着小盒子下掉
        */
        .parent{
            width: 300px;
            height: 300px;
            margin-bottom: 10px;
            background-color: rgb(175, 28, 243);
        }
        
        .one{
            width: 300px;
            height: 300px;
            margin-top: 20px;
            background-color: powderblue;
        }
    </style>
</head>
<body>
    <div class="parent"></div>
    <div class="one"></div>
</body>
</html>

浏览器效果：

北卿瑜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin值穿透及合并问题

如上图，只给大盒子设置了宽高，然后给小盒子设置宽高在设置margin值时，下间距和左右间距不影响，但是上间距导致大盒子随着一起掉下来了。外边大盒子不设置padding-top或者border-top,只给小盒子设置margin-top，外边大盒子会随着小盒子下掉。
复制链接

扫一扫