一、前言

在学习CSS时，遇到的很多问题都是和margin有关，这个小怪兽总是出其不意的让我的界面排版变的混乱，还让人摸不着头脑，原因还是在于我对他的一些属性没有进行一个深入的了解，导致我在设计之初就忽略了一些潜在的bug。所以本文就margin属性以及常见的问题做一个总结归纳。

二、什么是margin

CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School

边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

是不是看到以上的权威解释还是不明所以？别急，我画个图你就明白了。

还不明白？那好，我给你举个栗子，假设你住在一个别墅区，每栋别墅都是一个元素， 既然是别墅了那怎么着也得有个围墙吧（当然也可以没有，纯粹取决于业主喜不喜欢）。围墙就相当于上图的border边界（灰色区域），围墙与房子（上图的child即元素内容）之间的空间就是padding内边距（黄色区域），而围墙之外的空间就是外边距margin了（紫色区域），你可以当做是别墅与别墅之间的空间距离。margin存在的目的就是控制元素之间的间隔使页面排版更加的美观整齐，但它不属于元素的私有财产，在计算元素大小的时候可不要把margin算在内哦，毕竟你总不能把你家门口空气算作你自己的吧，那太霸道啦！看到这里你是不是对margin的作用范围有了大致的了解了，如果还不清楚，请继续往下看呀~

三、margin的特性

1、margin始终透明。这个特性其实可以这么理解，margin存在的目的就是为了隔开不同的元素使布局更加的美观，如果margin不是透明的就无法让不同的元素产生间隙达到隔开的目的还会影响其他布局，所以margin必须是透明的。

2、简写特性。margin属性可以设置4个值，分别是margin：top right bottom left；（可以按照顺时针的方式记忆，即：上右下左。顺序不能乱），这四个值也可以单独设置，即：margin-top、margin-bottom、margin-right、margin-left。除了可以单独设置之外，margin还可以进行简写（如非必要，不建议使用第三种简写），基本如下：

  • margin只有一个值，表示top、right、bottom、left都是同一个值。例如：margin：10px等价于margin：10px 10px 10px 10px；
  • margin只有两个值，第一值表示top、bottom的值，第二个值表示right、left的值。例如：margin：10px 20px等价于margin：10px 20px 10px 20px；
  • margin只有三个值，第一个值表示top的值，第二个值表示right、left的值，第三个值表示bottom的值。例如：margin：10px 20px 30px等价于margin：10px 20px 30px 20px；

3、垂直方向外边距合并。块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为一个外边距，这样的现象称为“margin合并”。只发生在与当前文档流方向相垂直的方向上，并且只能是块级元素。

四、margin合并的三种场景（纵向重叠）

1、相邻兄弟元素margin合并。这是margin合并中最常见、最基本的。例如：

 p {

        margin: 1em 0;

        background-color: pink;

    }

<p>第一行</p>

<p>第二行</p>

效果图：

第一行和第二行的间距还是1em，因为第一行的margin-bottom和第二行的margin-top合并在了一起，并非上下相加。

2、父级和第一个/最后一个子元素合并。

 1 <style>

 2     .grandfather {

 3         border: 2px solid red;

 4         width: 300px;

 5         height: 300px;

 6     }

 7

 8     .father {

 9         width: 200px;

10         height: 200px;

11         background-color: yellow;

12     }

13

14     .son {

15         margin: 2em 0;

16         background-color: pink;

17     }

18 </style>

19

20 <body>

21     <div class="grandfather">

22         <div class="father">

23             <div class="son">this is son</div>

24         </div>

25     </div>

效果图：

当给子元素添加外边距之后，父元素和子元素的上外边距（margin-top）发生了合并，导致父元素上外边距等同于变成了子元素的上外边距（合并的外边距值若都为正，则外边距取两者的最大值）造成了视觉上的父元素塌陷但实际父元素的上外边距的值并未改变。如何阻止这里margin合并的发生呢？

对于margin-top合并，可以进行如下操作（满足一个条件即可）：

  • 父级元素设置为块状格式化上下文元素（设置BFC），比如：给父级元素添加overflow：hidden；（推荐）
  • 父元素设置border-top值；
  • 父元素设置padding-top的值；
  • 父元素和第一个子元素之间添加内联元素进行分隔

对于margin-bottom合并，可以进行如下操作（满足一个条件即可）：

  • 父级元素设置为块状格式化上下文元素
  • 父级元素设置border-bottom值
  • 父级元素设置padding-bottom值
  • 父级元素和最后一个子元素之间添加内联元素进行分隔
  • 父级设计height、min-height或max-height

上面例子中在.father中添加overflow：hidden效果如下：

3、空块级元素的margin合并。例如：

 .father {

        overflow: hidden;

    }

.son {

        margin: 1em 0;

    }

 <div class="father">

        <div class="son"></div>

 </div>

效果图：

此时，.father所在的这个父级<div>元素高度仅仅是1em，因为.son这个空<div>元素的margin-top和margin-bottom合并在了一起。

五、margin负值问题

  1. margin-top和margin-left负值，元素向上、向左移动
  2. margin-right负值，右侧元素左移，自身不受影响
  3. margin-bottom负值，下方元素上移，自身不受影响

案列展示：

（1）margin-top为负值

（2）margin-left为负值

（3）margin-right为负值

（4）margin-bottom为负值

六、margin无效的问题

1、display:inline的非替换元素的垂直margin无效，对于内联替换元素垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。

2、表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。但是如果计算值是table-caption、table或者inline-table则没有此问题，可以通过margin控制外间距，甚至::first-letter伪元素也可以解析margin。

3、margin合并的时候，更改margin值可能是没有效果的。以父子margin重叠为例，假设父元素设置有margin-top：50px，则此时子元素设置margin-top：30px就没有任何效果表现，除非大小比50px大，或者是负值。

4、绝对定位元素非定位方向的margin值“无效”。因为绝对定位元素的渲染是独立的，普通元素和兄弟元素是互相关联的，但是绝对定位元素由于独立渲染无法和兄弟元素产生联系，因此margin无法影响兄弟元素定位，所以看上去就是无效的。

5、定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。这个现象的本质和和上面绝对定位元素非对立方margin值“无效”类似。原因在于，若想使用margin属性改变自身的位置，必须是和当前元素定位方向一样的margin属性才可以，否则，margin只能影响后面的元素或者父元素。

好了，总结了这么多，我想你应该对margin属性不陌生了吧，如果对你有帮助，就点个赞吧~

参考文档

https://www.cnblogs.com/zhangmingze/articles/4664074.html

https://blog.csdn.net/weixin_39855431/article/details/79929135

http://www.nowamagic.net/librarys/veda/detail/1608

https://blog.csdn.net/xun__xing/article/details/107334925

https://www.cnblogs.com/jjucap/p/5339725.html

margin属性总结，你想知道的这里都有的更多相关文章

  1. margin属性

    可以设置position:absolute/relative/fixed,通过调节top/bottom/left/right实现元素的定位,这样很好,但是有时候想通过margin来实现. 下面是mar ...

  2. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  3. CSS margin 属性

    设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...

  4. margin属性的正负值确定

    margin属性用来使用设置外边距,大多数情况使用正值,但是一些稍复杂的定位就会使用到负值,所以对margin属性的正负值理解是有必要的,本文同时解释了margin-right和margin-bott ...

  5. 【WPF】C#代码动态添加控件的Margin属性

    需求:一组按钮的数据是从服务器中Json数据发过来的,需要根据这个Json数据动态地添加这组按钮. 工具:使用http://www.newtonsoft.com/json来解析Json. 过程:C#代 ...

  6. CSS的margin属性：详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  7. 你是否彻底了解margin属性？

    写css,你少不了与margin打交道.你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是m ...

  8. HTML a标签如何设置margin属性(转)

    很多同学发现对DIV有效的许多CSS属性对<a>或<p>标签都无效,好比说 <div style="margin-top:5px;"></ ...

  9. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

随机推荐

  1. Lua _G

    1.全局变量的原形 在Lua中,要声明全局变量很简单,那就是定义变量的时候,前面不要加上local. 这个神秘的全局变量,其实本质上也是一个table,它把我们创建的全局变量都保存到一个table里了 ...

  2. Centos7 rsync同步备份文件

    Centos7 rsync同步备份文件 一.rsync主服务端 1,安装rsync 查看是否安装rsync [root@localhost /]# rpm -qa | grep rsync 在线安装r ...

  3. kylin聚合组的使用案例

    在使用kylin聚合组进行优化的时候,往往不知道怎么使用. 这里有2个小案例可以参考. 1. 需要对某个维度进行隔离. 如果有些维度,你不想要它和其他维度一起出现,你就可以单独给它建一个聚合组,并且在 ...

  4. 痞子衡嵌入式：关于i.MXRT中FlexSPI外设lookupTable里配置Normal read的一个小误区

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT中FlexSPI外设lookupTable里配置Normal read的一个小误区. 关于串行四线NOR Flash,当其作 ...

  5. TPS和响应时间之间是什么关系

    在这个图中,定义了三条曲线.三个区域.两个点以及三个状态描述. 三条曲线:吞吐量的曲线(紫色).使用率 / 用户数曲线(绿色).响应时间曲线(深蓝色).三个区域:轻负载区(Light Load).重负 ...

  6. GO学习-(21) Go语言基础之Go性能调优

    Go性能调优 在计算机性能调试领域里,profiling 是指对应用程序的画像,画像就是应用程序使用 CPU 和内存的情况. Go语言是一个对性能特别看重的语言,因此语言中自带了 profiling ...

  7. String类对象相加时做了什么

    我们都知道java中的加号操作符除了加法.表示正数之外,还可以用作字符串的连接.初学java时,你很可能会碰到类似下面的题目: 以下这段代码产生了几个String对象: String str1 = & ...

  8. LongAdder源码阅读笔记

    功能描述 LongAdder通过创建多个副本对象,解决了多线程使用CAS更新同一个对象造成的CPU阻塞,加快了对线程处理的速度.当多个线程同一时刻更新一个AtomicLong类型的变量时,只有一个线程 ...

  9. 【转】【NX二次开发】UFUN进度中断，单击停止可中断此操作

    队长的博客: https://www.cnblogs.com/nxopen2018/p/13174207.html 显示此对话框,点击可中断操作: 用到的ufun函数: UF_ABORT_ask_fl ...

  10. NX二次开发-从一个坐标系到另一个坐标系的转换

    函数:UF_MTX4_csys_to_csys().UF_MTX4_vec3_multiply() 函数说明:从一个坐标系统到另一个坐标系统的转换.如下图红色坐标系下有个红色的点,将红色的点转到绿色的 ...