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. python添加、修改、删除、访问类对象属性的2种方法

    1.直接添加.修改.删除.访问类对象属性 class Employee (object): empCount = 0 def __init__(self, name, salary) : self.n ...

  2. oracle 连接

    1.简述  1) 两个表的连接,是通过将一个表中的一列或者多列同另一个表中的列链接而建立起来的.用来连接两张表的表达式组成了连接条件.当连接成功后,第二张表中的数据就同第一张表连接起来了,并形成了复合 ...

  3. Vue(十六)vue-router路由

    一. vue-router路由   1. 简介 使用Vue.js开发SPA(Single Page Application)单页面应用 根据不同url地址,显示不同的内容,但显示在同一个页面中,称为单 ...

  4. RMQ(Range MinimumQuery)问题之ST算法

    ST算法------是用来求解给定区间RMQ的最值,本文以最小值为例 ST算法分为两部分 离线预处理(nlogn):运用DP思想,用于求解区间最值,并保存到一个二维数组中. 在线查询 (O(1)):对 ...

  5. java 遍历Map的4种方法

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  6. dubbo+zipkin调用链监控(二)

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. [Web 前端] 我不再使用React.setState的3个原因

    copy from : https://blog.csdn.net/smk108/article/details/85237838 从几个月前开始,我在新开发的React组件中不再使用setState ...

  8. RestTemplate之GET和POST调用和异步回调

    get方式 String url = "http://hostname:port/v1.0/data/data"; HttpHeaders headers = new HttpHe ...

  9. ssh的用户配置文件config管理ssh会话

    抄的这个: https://www.cnblogs.com/zhonghuasong/p/7236989.html 只是在这里留个存档,防止删除 我有这样的需求就是,因为需要ssh连接到服务器,然后每 ...

  10. [WPF] VisualBrush 中的布局

    今天插一篇随笔.说一说上周五遇到的一个布局问题,问题大概是这样的:需要在一个快区域上添加一张透明的背景图片,由于区域较大.并且宽高都不是固定大小,图片较小 所以图片需要居中显示.除此之外还需要在图片的 ...