最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：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. SpringSecurity入门(SSM版)

    1. 简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Sp ...

  2. 三种方式查询三级分类Tree

    话不多说,直接上代码 方式一:for循环嵌套一下 /** * 查询三级分类 * * @return */ @Override public List<GoodsType> findNode ...

  3. 一行代码修复100vh bug | 京东云技术团队

    你知道奇怪的移动视口错误(也称为100vh bug)吗?或者如何以正确的方式创建全屏块? 一.100vh bug 什么是移动视口错误? 你是否曾经在网页上创建过全屏元素?只需添加一行 CSS 并不难: ...

  4. python、numpy计算不同文档下的词的TF-IDF值以及进行文档相似度匹配（实战）

    TF-IDF 计算公式(一个词的 tf-idf 值在不同文档,它的值也不同): 1.根据已有的原始数据,只展示了前5片文档,content是文档内容,s_words是通过jieba分词将文档划分成了若 ...

  5. 2023-12-20：用go语言，给定一个数组arr，长度为n，在其中要选两个不相交的子数组。 两个子数组的累加和都要是T，返回所有满足情况中，两个子数组长度之和最小是多少？ 如果没有有效方法，返回-

    2023-12-20:用go语言,给定一个数组arr,长度为n,在其中要选两个不相交的子数组. 两个子数组的累加和都要是T,返回所有满足情况中,两个子数组长度之和最小是多少? 如果没有有效方法,返回- ...

  6. Spingboot整合Dubbo+zookeeper

    前言: 2023-12-26 19:38:05 最近学习分布式技术:Dubbo+zookeeper,准备写一个demo用springboot整合dubbo和zookeeper.但是看了网上一些教程都是 ...

  7. apache+mysql+php环境安装及配置

    一.安装mysql 1.yum安装mysql # yum -y install mysql mysql-server 2.安装mariadb,用mariadb来启动数据库,systemctl star ...

  8. Vue学习笔记-介绍&双向绑定

  9. 如何从零开始实现TDOA技术的 UWB 精确定位系统(2)

    这是一个系列文章<如何从零开始实现TDOA技术的 UWB 精确定位系统>第2部分. 重要提示(劝退说明): Q:做这个定位系统需要基础么?A:文章不是写给小白看的,需要有电子技术和软件编程 ...

  10. electron入门之打包exe分发（五）

    electron入门到入土,前面配置阿里镜像加速.为了防止我们打包下载龟速,所以需要给electron配置阿里镜像加速.参考配置阿里云镜像https://blog.csdn.net/weixin_44 ...