最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：margin，当时觉得其读起来很亲切，现在又发现很多遗忘的知识点。

了解margin

margin，译为“外边缘”，在CSS作为属性定义元素周围的空间，从以下盒模型中能更好的理解margin。

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;

    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;
    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;
    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;
    • 所有的4个边距都是25px

margin负值

  • margin-top、left负值：元素向上、向左移动
  • margin-right负值：右侧元素左移，自身不收影响；当右边无元素，其实就是缩小自身宽度。
  • margin-bottom负值：下方元素上移，自身不受影响

margin塌陷

margin塌陷（又称margin重叠）指文档流内，块级元素与块级元素垂直方向上的 margin 合并（塌陷）为单个 margin，且只发生在垂直方向。行内元素不存在margin 塌陷，因为行内元素不占有外边距，同样道理float元素也不存在margin合并。

总结为：

  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 空白内容的标签也会重叠

解决方案：

1.BFC块级格式化上下文，创建隔离的容器

<body>

    <style>

        .aa {

            display: flex;

            flex-direction: column;

            width: 300px;

        }

        .bb {

            width: 200px;

            height: 200px;

            border: 1px solid #333;

            margin-top: 10px;

        }

    </style>

    <div class="aa">

        <div class="bb" style="margin-bottom: 10px;"></div>

        <div class="bb" style="margin-top: 10px;"></div>

    </div>

</body>

2.子元素浮动定位，父元素清除浮动

<body>

    <style>

        .aa {

            border: 1px solid red;

        }

        .bb {

            width: 200px;

            height: 200px;

            border: 1px solid #333;

        }

        .clearfix:after {

			content:'';

   			display: table;

    		clear:both;

		}

    </style>

    <div class="aa clearfix">

        <div class="bb" style="margin-bottom: 10px;"></div>

        <div class="bb" style="margin-top: 10px;float:left;"></div>

    </div>

</body>

3.修改代码，添加空div，设置为flex布局

<body>

    <style>

        .aa {

            border: 1px solid red;

        }

        .bb {

            width: 200px;

            height: 200px;

            border: 1px solid #333;

        }

    </style>

    <div class="aa">

        <div class="bb" style="margin-bottom: 10px;"></div>

        <div style="display: flex;"></div>

        <div class="bb" style="margin-top: 10px;"></div>

    </div>

</body>

更多参考：https://blog.csdn.net/Celester_best/article/details/127455732

玛珍，玛珍，margin！的更多相关文章

  1. 天气预报API(一)：全国城市代码列表（“旧编码”）

    说明 2016-12-09 补充 (后来)偶然发现中国天气网已经有城市ID列表的网页... 还发现城市编码有两种,暂且称中国天气网这些编码为旧标准 "旧编码"的特征是 9个字符长度 ...

  2. 画面渲染：实时渲染(Real-time Rendering)、离线渲染(Offline Rendering)[转]

    实时渲染(Real-time Rendering) 实时渲染的本质就是图形数据的实时计算和输出.最典型的图形数据源是顶点.顶点包括了位置.法向.颜色.纹理坐标.顶点的权重等.在第一代渲染技术中(198 ...

  3. React 省市区三级联动

    省市区所对应的数据来自:http://www.zgguan.com/zsfx/jsjc/6541.html react中的代码是: export default class AddReceive ex ...

  4. 记一次node爬虫经历，手把手教你爬虫

    今天业务突然来了个爬虫业务,爬出来的数据以Excel的形式导出,下班前一个小时开始做,加班一个小时就做好了.因为太久没做爬虫了!做这个需求都是很兴奋! 需求说明 访问网站 (循环)获取页面指定数据源 ...

  5. unity 编辑器扩展简单入门

    unity 编辑器扩展简单入门 通过使用编辑器扩展,我们可以对一些机械的操作实现自动化,而不用使用额外的环境,将工具与开发环境融为一体:并且,编辑器扩展也提供GUI库,来实现可视化操作:编辑器扩展甚至 ...

  6. 金融量化分析【day112】：因子选股

    一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

  7. codevs 1021 玛丽卡（spfa）

    题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...

  8. codevs1021 玛丽卡

    题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...

  9. Codevs 1021 （玛丽卡）

    题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...

  10. Code[VS]1021 玛丽卡题解

    Code[VS]1021 玛丽卡题解 SPFA Algorithm 题目传送门:http://codevs.cn/problem/1021/ 题目描述 Description 麦克找了个新女朋友,玛丽 ...

随机推荐

  1. matlab 2018b 下载链接

    matlab 2018b 功能强大下载地址为 https://pan.baidu.com/s/1QZO35BtzcIkh_yPYRIGVWg

  2. Pix4Dmapper空间三维模型的应用实例：GIS选址分析

      本文介绍基于无人机影像建模完成后的结果,利用ArcMap软件进行空间选址分析,从而实现空间三维模型应用的方法. 目录 1 空间分析目标确立 2 基于基本约束条件的选址求解 2.1 坡度计算与提取 ...

  3. Go 泛型之泛型约束

    Go 泛型之泛型约束 目录 Go 泛型之泛型约束 一.引入 二.最宽松的约束:any 三.支持比较操作的内置约束:comparable 四.自定义约束 五.类型集合(type set) 六.简化版的约 ...

  4. SpringCloud OpenFeign的使用

    SpringCloud OpenFeign的使用 是什么: 声明式http客户端. 目的: 使远程调用更简单 作用: 提供了http请求模板,仅需编写简单接口和插入注解,就可以定义好原始http请求的 ...

  5. Freezable ---探索WPF中Freezable承载数据的原理

    引言 在之前写的一篇文章[WPF --- 如何以Binding方式隐藏DataGrid列]中,我先探索了 DataGridTextColumn 为什么不在可视化树结构内?又给出了解决方案,使用 Fre ...

  6. python中，如何优雅的解析和管理命令行参数

    背景 我们在编写python程序时,程序中经常会提供多种功能或者模式,在实际使用时根据不同的参数使用不同的功能.那么如何获取命令行传入进来的参数呢? 一般方法 一般情况下,我们会使用 sys 模块,如 ...

  7. 自签证书https

    1.下载编译好的openssl. http://slproweb.com/products/Win32OpenSSL.html 下载完成后运行安装: 记住你安装到的目录,等下打开这个文件夹(小贴士:最 ...

  8. 记一次kubernetes获取internal Ip错误流程

    本文分享自华为云社区<记一次kubernetes获取internal Ip错误流程>,作者:张俭. 偶尔也回首一下处理的棘手问题吧.问题的现象是,通过kubernetes get node ...

  9. 华为云PB级数据库GaussDB(for Redis)揭秘第五期：高斯 Redis 在IM场景中的应用

    摘要:揭秘高斯 Redis 在IM场景中的应用. 本文分享自华为云社区<华为云PB级数据库GaussDB(for Redis)揭秘第五期:高斯 Redis 在IM场景中的应用>,原文作者: ...

  10. 业务并发度不够，数仓的CN可以来帮忙

    摘要: CN全称协调节点(Coordinator Node),是和用户关系最密切也是DWS内部非常重要的一个组件,它负责提供外部应用接口.优化全局执行计划.向Datanode分发执行计划,以及汇总.处 ...