CSS_为什么margin-bottom经常无效，或者无法实现子div底部贴边父div？

最新推荐文章于 2023-11-08 16:31:13 发布

LiM .YOon A

最新推荐文章于 2023-11-08 16:31:13 发布

阅读量2k

点赞数

文章标签： css css3

原文链接：https://blog.youkuaiyun.com/Chill_Lyn/article/details/100903408

版权

本文介绍了如何通过CSS调整使小div紧贴父级div底边，涉及margin-bottom失效、float应用、padding/border使用以及position属性定位的方法，并解释了外边距合并问题。

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

原文链接https://blog.youkuaiyun.com/Chill_Lyn/article/details/100903408
首先我们定义两个div，一大一小，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #father {
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        #child {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="child"></div>
    </div>
</body>

</html>

效果：在这里插入图片描述

红色小div默认是在父级div左上角的，这时候我们想让红色小div贴住父级div的底边，如果添加margin-bottom:0px;属性，可以发现是没用的,如下

 #child {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom:0px;
        }

这是因为margin属性只能推开元素，而不能拉近元素！

所以如果想用margin属性让红色小div贴住父级底边，这是只能用margin-top属性将其推下来，如下：

 #child {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top:300px;
        }

在这里插入图片描述

这时我们发现，红色小div非但没有被推下来，而且父级div的margin-top增加了300px，这就又出现了外边距合并的问题，这是只需要在红色小div中加入float属性即可解决，如下：

 #child {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top:300px;
            float:left;
        }

二给父元素增加padding或者border来解决

#father {
            width: 500px;
            height: 500px;
            background-color: aqua;
            border:2px  solid green;
            或者
            padding:25px;
        }

三我们或者可以通过position属性来实现底部贴边，如下：

 		#father {
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }

        #child {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            bottom: 0;
        }