学习笔记——margin-top，margin-bottom之间的合并问题

CSS中，margin-top和margin-botttom有一些特殊性。它们会在某种情况之间相互合并，并且会将值最大的那个当作外边距的值。

1. margin-top具有继承性

当两个盒子是父子关系时，对父元素设置margin-top,子元素也相当于有了相同的margin-top。

            .box1 {margin-top: 20px;width: 200px;height: 200px;background-color: #000000;}.box2 {width: 100px;height: 100px;background-color: #0000FF;}

        <div class="box1"><div class="box2"></div></div>

2.margin-top，margin-bottom会合并

当两个盒子是父子关系或者上下兄弟关系时，设置margin-top，margin-bottom。两个盒子之间的margin-top，margin-bottom会合并，取最大的值当作共同的外边距。

            // 上述CSS代码修改.box2 {margin-top: 30px;width: 100px;height: 100px;background-color: #0000FF;}

如图：两个盒子margin-top合并成为一个，子元素的较大，所以最终的外边距以子元素的为准。

            .box1 {margin-bottom: 60px;width: 200px;height: 200px;background-color: #000000;}.box2 {margin-top: 30px;width: 100px;height: 100px;background-color: #0000FF;}

        <div class="box"><div class="box1"></div><div class="box2"></div></div>

如图：当两个盒子为上下兄弟关系时，下边盒子的margin-top和上边盒子的margin-bottom会合并，上边的外边距比较大，所以最终外边距为上盒子的margin-bottom

3.margin-top，margin-bottom“不”会合并

有时候，当使用弹性布局时，上下兄弟盒子的外边距不会合并。

            .box {display: flex;flex-direction: column;}.box1 {margin-bottom: 60px;width: 200px;height: 200px;background-color: #000000;}.box2 {margin-top: 30px;width: 100px;height: 100px;background-color: #0000FF;}

        <div class="box"><div class="box1"></div><div class="box2"></div></div>

如图：两个兄弟盒子之间的外边距，为上盒子margin-bottom和下盒子margin-top之和。margin-top和margin-bottom没有合并。

学习笔记——margin-top，margin-bottom之间的合并问题相关推荐

c# 学习笔记（2）窗体之间互相调用的方法
c# 学习笔记 (2) 窗体之间互相调用的方法创建一个winform工程创建两个窗体一个子窗体,一个父窗体,这里为了演示,子窗体和父窗体上都有一个文本框和按键,点击任意一个窗体上的按键,窗体上文 ...
设计模式学习笔记1——类与类之间的关系
1.继承关系概念继承又分为2种方式,一种叫实现继承,一种叫接口继承.参见笔记--[2种继承方式学习笔记].(https://blog.csdn.net/yhb1206/article/detail ...
opencv 学习笔记6：通道的拆分与合并
python + opencv 通道拆分原始方法 import cv2 img=cv2.imread('图像名') b=img[:,:,0] g=img[:,:,`1] r=img[:,:,2] 新 ...
protocol学习笔记001---RPC和HTTP协议之间的区别_与各自优势
很长时间以来都没有怎么好好搞清楚RPC(即Remote Procedure Call,远程过程调用)和HTTP调用的区别,不都是写一个服务然后在客户端调用么?这里请允许我迷之一笑~Naive!本文简单 ...
Unity 中的 3D 数学学习笔记——认识坐标系及坐标系之间的转换
一 :3d空间坐标系 x,y,z 轴 z轴方向确定有两种方式左手坐标系和右手坐标系左手坐标系:伸开左手,大拇指指向X轴正方向,食指指向Y轴正方向,其他三个手指指向Z轴正方向. 右手坐标系:伸开右 ...
HTML学习笔记：演示HTML页面之间传递数据
1.起始页面page01.html 2.目标页面page02.html 3.查看运行效果单击[提交]按钮,跳转到目标页面page02.html 4.出现乱码问题 5.解决乱码问题如何解决这个问题呢 ...
Linux学习笔记之权限与命令之间的关系（重要）及文件与目录知识总结
一.让使用者能进入某目录成为可工作目录的基本权限为何: 可使用的命令:例如 cd 等变换工作目录的命令: 目录所需权限:使用者对这个目录至少需要具有 x的权限额外需求:如果使用者想要在这个目录内利用 ...
【学习笔记】Python之 pdf 下载、合并
pdf下载 import requests# python requests 的pdf 文档 requests_pdf_url = "https://link.springer.com/co ...
Flot chart学习笔记
背景及相关简介在最近的BS新项目中需要用到绘图数据显示的功能.在进行充足的选择之后决定才去开源的Flot.Flot是一个jQuery绘图库.主要用于简单的绘制图表功能.具有吸引人的渲染外观和互操作的 ...
html+css学习笔记 [基础1]
---------------------------------------------------------------------------------------------------- ...

学习笔记——margin-top，margin-bottom之间的合并问题

1. margin-top具有继承性

2.margin-top，margin-bottom会合并

3.margin-top，margin-bottom“不”会合并

学习笔记——margin-top，margin-bottom之间的合并问题相关推荐

最新文章

热门文章