最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：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. 万界星空科技QMS质量管理系统

    QMS(Quality Management System)质量管理系统是五大基础系统之一,在工业企业中被广泛的应用,在质量策划.生产过程质量监督.体系审核和文档管理等业务上发挥着不可替代的作用. 一 ...

  2. 在Linux服务器上装jenkins（方式一：war包）

    官网下载jenkins https://www.jenkins.io/zh/download/ 官网下载太慢,可以去清华镜像下载(百度搜索:清华镜像) 下载的文件是jenkins.war 把安装文件放 ...

  3. 一步一步教你写kubernetes sidecar

    本文分享自华为云社区<一步一步教你写kubernetes sidecar>,作者: 张俭. 什么是sidecar? sidecar,直译为边车. 如上图所示,边车就是加装在摩托车旁来达到拓 ...

  4. node node-sass sass-loader版本兼容问题

    相关概念 sass Sass是一种预处理器脚本语言,可以解释或编译成层叠样式表(CSS). Sass包含两种语法:较旧的语法使用缩进将代码块和换行符分隔为单独的规则:较新的语法SCSS使用像CSS这样 ...

  5. electron入门之试调工具remote（三）

    electron入门到入土,从渲染线程中创建新窗口.2022-03-21入门版本17.1.2 electron重要概念,只有一个主线程,其他都是渲染进程或者叫子线程,他们不能直接相互操作,可以通过ip ...

  6. 干货分享丨轻松玩转 Huawei LiteOS 传感框架

    摘要:LiteOS传感框架将物联网终端设备上不同类型的传感器统一管理,通过抽象不同类型传感器接口,屏蔽其硬件细节,做到"硬件"无关性,非常方便于物联网设备的开发.维护和功能扩展. ...

  7. Ambient Mesh：Istio 数据面新模式

    摘要:基于Istio对于Kubernetes生态的完美补充,随着Kubernetes的大规模普及,Istio 数据面新模式 -Ambient MeshIstio也实现了对用户心智以及市场的快速抢占. ...

  8. 诸多老牌数据仓库厂商当前，Snowflake如何创近12年最大IPO金额

    摘要:在数据仓库/分析领域,有传统厂商Oracle,Teradata,开源软件Hadoop,云厂商AWS Redshift,Google Bigquery,Snowflake成功的技术原因是什么? 1 ...

  9. 如何花“一点点小钱”突破华为云CCE服务的“防线”

    摘要:有没有方法绕开CCE的限制,自由的调用K8s的API呢?有还便宜,2.4元/集群/天. 申明:所有的一切都是为了使得华为云可以更好,而不是为了diss它. 通过华为云购买多个K8s集群,又想使用 ...

  10. 提升源代码安全性的C#和Java深度混淆工具——IpaGuard

    提升源代码安全性的C#和Java深度混淆工具--IpaGuard 摘要 Ipa Guard是一款功能强大的IPA混淆工具,通过对iOS IPA文件进行混淆加密,保护其代码.资源和配置文件,降低破解反编 ...