发布日期：2021-05-04 01:05:48 浏览次数：21 分类：技术文章

本文共 445 字，大约阅读时间需要 1 分钟。

看代码1

    
       
       
       Document

在这里插入图片描述

看代码2

    
       
       
       Document

在这里插入图片描述

看到了吧，不管box2有没有设置margin-top=100px，结果都一样，即相邻的垂直方向外边距会发生重叠现象。

兄弟元素

如果两个元素是兄弟元素，相邻垂直外边距会取较大的那个。（两个都是正值）

如果两个值一正一负，则取两者的和。

如果都是负的，则取绝对值较大的。

父子元素

对于上外边距，子元素的会传递给父元素。

    
       
       
       Document

在这里插入图片描述

这个效果与兄弟元素不同，它不是我们想要的效果，所以需要进行处理。

处理的方法有两种：1、不用外边距，改用padding；2别让它们的外边距相邻，可以给父元素设置1px的border。

转载地址：https://blog.csdn.net/weixin_45034895/article/details/116331452 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：前端学习笔记39-行内元素的盒模型

下一篇：前端学习笔记37-垂直方向的布局

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！