最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：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. C++ Qt开发：Charts绘制各类图表详解

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TreeWid ...

  2. Taurus .Net Core 微服务开源框架：Admin 插件【4-8】 - 配置管理-Mvc【Plugin-Limit 接口访问限制、IP限制、Ack限制】

    前言: 继上篇:Taurus .Net Core 微服务开源框架:Admin 插件[4-7] - 配置管理-Mvc[Plugin-Metric 接口调用次数统计] 本篇继续介绍下一个内容: 1.系统配 ...

  3. 在eclipse中拖动项目到Tomcat服务器中报错：Project facet Java version 16 is not supported.解决办法

    补充,还有一种情况:拖不进来,但是根本不报错,解决办法:

  4. Linux应急响应总结——更新中

    Linux应急响应 用户信息 方向 查看可登录的用户: cat /etc/passwd | grep /bin/bash awk -F: '{if($7!="/usr/sbin/nologi ...

  5. Python——第五章：模块（Module）、自定义模块、第3方开源模块、包（Package）

    什么是模块(Module)? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多代码按功能分组,分别放到不同的文件里,这 ...

  6. 摆脱自研难题，AUI Kit助力企业快速搭建专属互动课堂

    本专栏将分享阿里云视频云MediaBox系列技术文章,深度剖析音视频开发利器的技术架构.技术性能.开发能效和最佳实践,一起开启音视频的开发之旅.本文为MediaBox最佳实践篇,重点从互动课堂AUI ...

  7. SQL语句(mysql)「一」

    SQL的一些常用语句 创建类 CREAT DATABASE <数据库名>; 该方法创建一个数据库,当要使用一个数据库的时候,使用指令: USE <数据库名>; 查看当前正在使用 ...

  8. Unix IPC

    本文主要是摘抄 APUE 中 IPC 部分的内容 IPC(Inter Process Communication)进程间通信,是指在进程之间进行通信的一种方式,本文将简要介绍一下在 Unix 中存在的 ...

  9. 华为云MVP朱有鹏：做IoT开发乐趣无穷，年轻开发者更要厚积薄发

    [摘要] 可以预见的是,AIoT会是未来一段时间主流的技术趋势方向,当前也有不少科技巨头涌入其中,蓄势待发,而5G的到来加速了AIoT产业的扩张速度,所以如华为云MVP朱有鹏所说,年轻的开发者应该要拥 ...

  10. 物联网常见协议之Amqp协议及使用场景解析

    摘要:本文围绕AMQP协议,为大家详细解析AMQP协议.核心技术亮点.多协议之间的对比以及使用实践. 本文分享自华为云社区<物联网常见协议之Amqp协议及使用场景解析>,作者:张俭. 引言 ...