margin

See the Pen margin by wmui (@wmui) on CodePen.

该属性用于设置元素的外边距,外边距是透明的,默认值0。这是一个简写属性,属性值最多为4个,例如margin: 10px 15px 10px 15px,分别表示上外边距、右外边距、下外边距、左外边距。属性值也可以是3个,例如margin: 10px 15px 10px,表示上外边距、左右外边距、下外边距。属性值可以为2个,例如margin: 10px 15px,表示上下外边距、左右外边距。属性值可以为1个,例如margin: 10px,表示四边外边距。外边距也可以单独设置,margin-top上外边距,margin-right右外边距,margin-bottom下外边距,margin-left做外边距。属性值可以是auto,浏览器自动计算外边距,块级元素会水平居中显示,如例1,至于为何水平方向居中,垂直方向未居中,这个下面细说。属性值可以是百分比,百分比是基于父元素的宽度计算的,在例2中为子元素设置了margin: 50%。属性值可以是CSS长度单位,值可以是负值。属性值可以是inherit

外边距叠加

说明:普通文档流中,垂直排列的两个块级盒子(非父子),他们的上外边距或者下外边距会出现叠加,会以两者中外边距较大的那个为准,左右外边距不会叠加。

情况一:上面的例3和例4演示了这个现象,例3margin: 50px,例4margin: 30px,最后两个盒子之间的距离为50px,要想发生叠加需要满足以下条件:

1.只发生在块级元素且是普通流(inline-block元素不会叠加)

2.只发生在垂直方向上

情况二:上面的例2中父子嵌套的两个盒子,父元素和第一个子元素或最后一个子元素也会发生叠加效果,在例2中大盒子的外边距默认为0,而里面的小盒子上外边距50%(即100px),最终两个盒子的上外边距都是100px,父子嵌套的盒子需要满足以下条件才会发生外边距叠加:

  1. 父元素非BFC元素
  2. 父元素没有padding-top值
  3. 父元素没有border-top值
  4. 父元素和第一个子元素间没有inline元素间隔

细心观察发现下外边距没有发生叠加,margin-bottom发生叠加需要满足另一个条件,上面的第四条改为:父元素和最后一个子元素之间没有inline元素分隔,以及父元素没有height、min-height、max-height限制。

情况三:如果一个盒子没有任何内容也没有高度,这个盒子真身也会出现外边距叠加,例如:

<div style="margin: 30px 0;"></div>

这个盒子的上下边距最终是30px,需要满足以下条件空盒子才会发生叠加:

1.没有border

2.没有padding

3.没有内容和高度

margin: auto无法实现垂直居中

拿例1先说,为什么能实现水平居中?这是因为子盒子是一个块级元素,它的宽度默认是等于父盒子的宽度,于是子盒子和父盒子之间就有了联系,当给子盒子固定宽度后,margin: auto能平分剩余空间

在垂直方向上,子盒子的初始高度是不确定的,它是根据内容的高度撑开的,这样父盒子和子盒子就无法建立联系,所以margin: auto在垂直方向上会被重置为0,初始高度不等于设置的高度。

margin: auto无法实现图片水平居中

类似块级元素无法实现垂直居中的原因,图片的宽度默认等于自身,无法和父盒子建立联系,所以左右的外边距会被重置为0。解决方法,给图片设置display: block让图片容器占满父盒子

行内元素垂直外边距无效

对于行内元素(inline),垂直方向上的排列布局是通过line-height, vertical-align来影响的,margin值在垂直方向不会影响他们,但是水平方向可是有效的。还有一些元素,如<thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <colgroup>这些和表格相关的元素设置margin是无效的

理解BFC

EFC(Block Formatting Content),块级格式化上下文,可简单理解为块级盒子在页面中的一块渲染区域,这块区域可以看做一个独立的容器,容器里面的元素不会影响到外边的元素,网页布局常见的文档流有普通文档流、浮动流和定位流三种,FC就是普通流。

BFC触发条件

  1. 元素的float值不为none
  2. overflow值不为visible
  3. display值为inline-block、table-cell、table-caption
  4. position值为absolute、fixed

满足上面的任一个条件都可触发BFC

BFC的作用

See the Pen BFC by wmui (@wmui) on CodePen.

作用1:触发元素的BFC,使该元素不被浮动元素覆盖

例1中黄色的盒子浮动了,导致遮盖住了普通流中的红色盒子,此时只要触发红色盒子的BFC,黄色盒子就不会覆盖红色盒子了。

作用2:包含浮动元素

在例2中,红色父盒子在普通流中,黄色子盒子浮动了,父盒子无法包围子盒子,触发父盒子的BFC,使父盒子包围子盒子

作用3: 阻止外边距叠加

在例3中是常见的外边距叠加情况,触发任一个盒子的BFC,即可阻止外边距叠加,但并不是只有触发BFC才能阻止叠加。

有一种情况有些特殊,当使用overflow: hidden阻止叠加时,需要为子盒子的父元素设置这一属性,例如:

 <div style="margin-bottom: 20px;">TEST</div>
<div style="overflow: hidden">
<div style="margin-bottom: 20px;">TEST</div>
</div>

阻止外边距叠加

除了触发BFC可以阻止外边距叠加,还有其他方法,上面说过触发外边距叠加需要满足一些条件,我只要违背那些条件自然就可以阻止外边距叠加了。对于父子嵌套叠加,我可以为父元素设置border或padding,也可以添加一个行内元素作为第一个子元素(必须要有内容),还可以触发子元素或父元素的BFC。对于非父子嵌套的外边距叠加,这其实是一种正常的布局效果,如果非要阻止叠加,那就触发BFC,设置border或padding是不能阻止其叠加的,只有触发BFC

CSS外边距属性,深入理解margin的更多相关文章

  1. CSS外边距合并(塌陷/margin越界)

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  2. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

  3. CSS margin 外边距 属性的位置关系

    padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...

  4. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  5. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

  6. css内外边距属性

    盒子模型: 所有HTML元素可以看作盒子,在CSS中,"box model"是用来设计和布局时 使用. CSS盒模型本质上是一个盒子, 封装周围的HTML元素, 它包括:边距,边框 ...

  7. margin外边距属性

    外边距属性: 设置元素与元素之间的距离(外边距),4个方向(上右下左). margin:长度值|百分比|auto margin-top margin-right margin-bottom margi ...

  8. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  9. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

随机推荐

  1. bzoj1051: [HAOI2006]受欢迎的牛(tarjan板子)

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6064  Solved: 3179[Submit][Sta ...

  2. yii2 basic版 MVC 部分

    一.model 1.什么是模型 模型是 MVC 模式中的一部分,是表现业务数据.规则和逻辑的对象 可通过继承 yii\base\Model 或它的子类(activeRecord)来定义模型类,基类 y ...

  3. MongodbHelper

    这个是在查找到的一些资料的基础上自己写的,不足之处请交流指正: using MongoDB.Bson; using MongoDB.Driver; using System; using System ...

  4. 35、concurrent.futures模块与协程

    concurrent.futures  —Launching parallel tasks    concurrent.futures模块同时提供了进程池和线程池,它是将来的使用趋势,同样我们之前学习 ...

  5. Deepin 15.4 如何使用 罗技无线键盘/鼠标(采用优联技术)

    1.罗技的“无线优联技术”还是非常强大的,它跟具体的操作系统无关: 2.你只需要 让“优联接收器(一个USB设备)”跟 “无线键盘/鼠标” 配对即可,配对完之后,就无需再配对,即使把“优联接收器”插到 ...

  6. ReactRouter升级 v2 to v4

    概述 react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is component). ...

  7. EBS WebADI 存储过程增加参数

    CREATE OR REPLACE FUNCTION CUX_EXEC_SQL (P_SQL IN VARCHAR2)   RETURN NUMBERAS   L_CNT   NUMBER;BEGIN ...

  8. Maven中classifier

    1.classifier概述 classifier通常用于区分从同一POM构建的具有不同内容的构件(artifact).它是可选的,它可以是任意的字符串,附加在版本号之后. 2.使用场景 场景一:区分 ...

  9. 用GO开发企业级分布式云存储系统

    一.基础架构 二.开发工具

  10. KVM之CPU虚拟化

    1.1 为什么要虚拟化CPU 虚拟化技术是指在x86的系统中,一个或以上的客操作系统(Guest Operating System,简称:Guest OS)在一个主操作系统(Host Operatin ...