h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>这是一个标题</h2>
<div>
<h2>这是又一个标题</h2>
</div> 本例中,第一个h2的margin-bottom(10px),div的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。

语法:

margin:[ <length> | <percentage> | auto ]{1,4} | inherit

默认值:看每个独立属性

适用于:所有元素,除非 table | inline-table | table-caption 的表格类元素之外

继承性:无

动画性:是

计算值:看每个独立属性

相关属性:[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left]

取值:

auto:水平(默认)书写模式下,margin-top/margin-bottom计算值为0,margin-left/margin-right取决于可用空间。详见:margin系列之keyword auto

<length>: 用长度值来定义外补白。可以为负值

<percentage>: 用百分比来定义外补白。水平(默认)书写模式下,参照其包含块 width进行计算,其它情况参照 height ,可以为负值

说明:

检索或设置对象四边的外延边距。

  • 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

  • 如果只提供一个,将用于全部的四边。
  • 如果提供两个,第一个用于上、下,第二个用于左、右。
  • 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
  • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。
  • 外延边距始终透明。
  • 某些相邻的margin会发生合并,我们称之为margin折叠:
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2>这是一个标题</h2>
<div>
<h2>这是又一个标题</h2>
</div> 本例中,第一个h2的margin-bottom(10px),div的margin-top(20px),第二个h2的margin-top(10px)将被合并,它们之间的margin间隙最后是(20px),即取三者之间最大的那个值。

父元素与第一个/最后一个子元素 会合并 margin

margin css的外边距的更多相关文章

  1. Margin的垂直外边距问题

    做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...

  2. 关于CSS的外边距合并问题

    首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...

  3. css内外边距属性

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

  4. CSS 内外边距 float positio属性

    一.外边距和内边 margin:            用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding:   ...

  5. CSS 垂直外边距合并:规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  6. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

  7. css中外边距合并

    最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;heig ...

  8. CSS之外边距折叠

    外边距折叠 Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距. 其中所说的 margin 毗邻,可以归结为以下两点: 这两个或多个 ...

  9. css中外边距

    1.内部元素设置margin等,父元素高度不能适应 .classA { height: 200px; background-color: cornflowerblue; overflow: hidde ...

随机推荐

  1. ELF静态链接

    一直对ELF目标文件是怎样链接成可执行文件感到比较的疑惑,ELF文件里面的重定位段是怎样解决符号引用问题的?前几天偶然看了<深入理解计算机系统>里面讲了这个问题,看了之后对里面的实现机制终 ...

  2. IDDD 实现领域驱动设计-一个简单业务用例的回顾和理解

    上一篇:<IDDD 实现领域驱动设计-由贫血导致的失忆症> 这篇博文是对<实现领域驱动设计>第一章后半部分内容的理解. Domain Experts-领域专家 这节点内容是昨天 ...

  3. geotrellis使用(十七)使用缓冲区分析的方式解决单瓦片计算边缘值问题

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 需求分析 实现方案 总结 一.前言        最 ...

  4. php使用post动态选择头像和js事件动态改变头像

    <html> <head> <meta http-equit="Content-type" content="text/html" ...

  5. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...

  6. 1Z0-053 争议题目解析687

    1Z0-053 争议题目解析687 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 687.Users are connected to a database instance th ...

  7. 机器学习 1 linear regression 作业

    话说学机器学习,不写代码就太扯淡了.好了,接着上一次的线性回归作业. hw1作业的链接在这: http://speech.ee.ntu.edu.tw/~tlkagk/courses/ML_2016/L ...

  8. 故障恢复和恢复模式(Crash Recovery & Recovery Models)

    数据库的恢复模型是否影响故障恢复,在简单恢复模式里,你是否会丢失事务?在今天的文章里我想谈下这点,详细讨论下. 恢复模式(Recovery Models) 对于这个问题的最简单的答案是不会:恢复模型不 ...

  9. iOS 商品倒计时 限时特价 限时优惠 功能的封装

    最近项目中多个页面用到了 商品特价倒计时的功能  为了偷懒 于是自己封装了一个限时抢购 倒计时的view 代码实现如下: 定向价 限时特价 模型代码实现: #pragma mark 商品定向价模型 @ ...

  10. php 数组动态添加实现代码(最土团购系统的价格排序)

    最近在实现最土团购系统的价格排序功能,需要对$oc数组进行扩展,经过测试用下面的方法即可. 核心代码如下: <?php $now=time(); $oc = array( 'team_type' ...