margin-top的问题。

最新推荐文章于 2022-10-06 12:53:08 发布

牛爷爷lxl

最新推荐文章于 2022-10-06 12:53:08 发布

阅读量1.8k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/liuxilei66/article/details/78219538

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个div内嵌套一个div，如果给内部div设置margin-top，理论上，外部div位置不变，内部div相对向下移动。（但有个前提是，外部的div未设置border和padding）

未设置margin-top的情况：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>margin-top的问题</title>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        .outside{
            width:200px;
            height:200px;
            background-color: blue;

        }
        .inside{
            /*margin-top:20px;*/
            width:100px;
            height:100px;
            background-color: #000;
        }
    </style>
</head>
<body>
   <div class="outside">
       <div class="inside">
       </div>
   </div>
</body>
</html>

代码效果图
现在把magrin-top的注释取消：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>margin-top的问题</title>
    <style type="text/css">
        *{
            margin:0px;
            padding: 0px;
        }
        .outside{
            width:200px;
            height:200px;
            background-color: blue;

        }
        .inside{
            margin-top:20px;
            width:100px;
            height:100px;
            background-color: #000;
        }
    </style>
</head>
<body>
   <div class="outside">
       <div class="inside">
       </div>
   </div>
</body>
</html>

效果图
理论上应该是下面这种情况：
这里写图片描述
这个问题我在5大主浏览器上试过，发现均出现这种情况：然后上网查询，找到了一段对这个描述最清楚的解释。

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。

解决办法如下：

 1.给外部div设置border-bottom:0.1px solid #000;
 2.或者设置padding-bottom:0.1px;
 3.给设置maigin-top的div设置overflow:hidden.

牛爷爷lxl

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录