Css Margin合并问题

最新推荐文章于 2023-05-04 20:29:06 发布

MrRevolution

最新推荐文章于 2023-05-04 20:29:06 发布

阅读量651

点赞数 1

分类专栏： CSS 文章标签： margin CSS 合并

本文链接：https://blog.csdn.net/fbb3682227/article/details/46388063

版权

Margin合并分为两种情况第一种比较简单好理解就是指垂直方向上两个相邻div。如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试margin</title>
    <style>
        #test{
          width:50px;
          height: 50px;
            margin: 50px;
            background: blue;
        }
        #test1{
            width:50px;
            height: 50px;
            margin: 50px;
            background: red;
        }
    </style>
</head>
<body>
<div id="test">

</div>
<div id="test1"></div>

</body>
</html>

第一个和第二个的margin是相等值的情况出现如图情况，那么上下的margin不相等的情况是什么呢？看图由此可以得出一个结论：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

下面我们再看第二中就是父子div并且假设没有内边距或边框把外边距分隔开这种情况

<!DOCTYPE html>
&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MrRevolution

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Css Margin合并问题

Margin合并分为两种情况第一种比较简单好理解就是指垂直方向上两个相邻div。如下测试margin #test{ width:50px; height: 50px; margin: 50px; background: blue; }
复制链接

扫一扫