margin重叠现象

最新推荐文章于 2023-09-10 14:12:45 发布

雙安

最新推荐文章于 2023-09-10 14:12:45 发布

阅读量380

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/xiongwanfeng/article/details/74908142

版权

HTML/CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

上下相邻的普通元素,上下边距并非简单地相加，而是取其中比较大的边距值，这种现象叫做margin重叠
注意：是普通元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>margin重叠现象的研究</title>
    <style type="text/css">
        #test1{
            height: 100px;
            background: green;
            margin-bottom: 50px;
        }
        #test2{
            height: 100px;
            background: pink;
            margin-top: 80px;
        }
    </style>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
</body>
</html>

这里写图片描述

同时，父子元素也会发生margin重叠现象：
分别定义其margin-top属性值，父元素为50px子元素为120px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>margin重叠现象的研究</title>
    <style type="text/css">
        #father{
            height: 100px;
            background: green;
            margin-top: 50px;
        }
        #son{
            height: 50px;
            background: pink;
            margin-top: 120px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>

</body>
</html>

结果如下，取了较大的子元素的margin-top值120px

这里写图片描述

雙安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin重叠现象

上下相邻的普通元素,上下边距并非简单地相加，而是取其中比较大的边距值，这种现象叫做margin重叠注意：是普通元素<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>margin重叠现象的研究</title> <style type="text/css"> #test1{
复制链接

扫一扫