最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：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. 阿里云+智能ai+gpt

    1.阿里 百度 腾讯分词 知识库.     阿里云(项目具体的费用预算展示,实际功能核算.) 向量智库 https://developer.aliyun.com/article/1234278?spm ...

  2. 华企盾DSC客户端无法连接以及无法切换工作模式常见处理方法

    先查看客户端日志见文档<客户端连接服务器问题和加密进程初步判断>常见的 1.检查客户端连接服务器配置是否正确 2.telnet服务器的IP和端口是否通 3.客户端日志中显示client i ...

  3. 微信模板消息 PHP

    微信SDK: <?php class Oauth { //获得全局access_token public function get_token(){ //如果已经存在直接返回access_tok ...

  4. 确定了-C#是2023年度的编程语言！

    大家好,我是沙漠尽头的狼.在朋友圈看到桂素伟大佬发的喜讯截图,站长赶紧翻译向大家报喜,确定了-C#是2023年度的编程语言! 在TIOBE指数的历史上,C#首次获得了年度编程语言的奖项.祝贺!二十多年 ...

  5. 基于FPGA的电子琴设计（按键和蜂鸣器）---第一版---郝旭帅电子设计团队

    本篇为各位朋友介绍基于FPGA的电子琴设计(按键和蜂鸣器)----第一版. 功能说明: 外部输入七个按键,分别对应音符的"1.2.3.4.5.6.7",唱作do.re.mi.fa. ...

  6. IO流小结图片

  7. 一文搞定Matplotlib 各个示例丨建议收藏

    摘要:Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用 ,Matplotlib也是深度学习的常用绘图库,主要是将训练的成果进行图形化,因为这样更直观,更方便发现训练中的 ...

  8. 列举GaussDB(DWS)常见的查询时索引失效场景

    摘要:使用GaussDB(DWS)时,有时为了加快查询速度,需要对表建立索引.有时我们会遇到明明建立了索引,查询计划中却发现索引没有被使用的情况.本文将列举几种常见的场景和优化方法. 本文分享自华为云 ...

  9. Kubernetes(K8S) yaml 介绍

    使用空格做为缩进 缩进的空格数目不重要, 只要相同层级的元素左侧对齐即可 低版本缩进时不允许使用 Tab 键, 只允许使用空格 使用#标识注释, 从这个字符一直到行尾, 都会被解释器忽略 --- 使用 ...

  10. Spring事务传播机制解析

    确保数据一致性的关键 在Java的Spring框架中,事务管理是保证应用数据一致性和可靠性的关键.Spring提供了灵活的事务传播机制,它定义了事务边界,以及在嵌套方法调用时如何处理事务.本文旨在深入 ...