由浅入深漫谈margin属性

2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin

margin 在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。

一、margin的基本特性

margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用来设置 box 的 margin area。属性 margin 可以用来同时设置 box 的四边外边距，而其他的 margin 属性只能设置其自各的外边距。

margin 属性可以应用于几乎所有的元素，除了表格显示类型（不包括 table-caption, table and inline-table）的元素，而且垂直外边距对非置换内联元素（non-replaced inline element）不起作用。

或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

margin 始终是透明的。

二、margin 的基本写法

外边距的 margin-width 的值类型有：auto | length | percentage

percentage：百分比是由被应用 box 的containing block（注：一个元素的 containing block 是该元素产生的 box(es)在计算位置和大小时参考的一个矩形）的大小所决定。对于 margin-top 和 margin-bottom 也同样成立。

margin 的默认值为 0，并且 margin 支持负值。

上面我们曾提到属性 margin 可以用来同时指定 box 的四边外边距。如果属性 margin 有四个值，那么值将按照上-右-下-左的顺序作用于四边，即从元素的上边开始，按照顺时针的顺序围绕元素。表达式如下：

margin：top right bottom left；

四个数值中间以空格分隔。效果等同于：

margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;

并且规范还提供了省略的数值写法，基本原则如下：

  1. 如果没有 left 值，则使用 right 代替；
  2. 如果没有 bottom 值，则使用 top 代替；
  3. 如果没有 right 值，则使用 top 值代替。

根据这些基本原则，我们可以有三种省略方式，但不管怎样省略 margin 的数值都会大于等于一个，而 margin 的默认数值是从 top 开始至 left 结束，那么对于省略的具体情况，我们可以从 left 反推理回去。

1、如果 margin 只有三个值，按照值的顺序为 margin：top right bottom; 缺少了 left，根据原则，则 left 的值有 right 来代替。margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

2、如果 margin 只有两个值，按照值的顺序为 margin：top right; 缺少了 bottom 和 left，根据原则 left 的值由 right 来代替，bottm 的值由 top 来代替。margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果 margin 只有一个值，按照值的顺序为 margin:top; 缺少了 bottom、left 和 right，根据原则 left 的值由 right 来代替，bottom 的值由 top 来代替，right 的值右 top 来代替，也就是说 left 的值也由 top 来代替。margin:10px; 就等于 margin:10px 10px 10px 10px;

三、margin的解析逻辑

目前我们已经了解到了 margin 的基本特性和基本写法，但对元素 margin 的基本解析逻辑还是很模糊，到底 margin 的 top、right、bottom、left 都是以什么为基准来促使 box model 形成。为了形象，易懂的对 margin 的逻辑进行说明，下面讲解的过程中，将引入 W3C 上没有的参考线的说法。何谓参考线？参考线就是 margin 移动的基准点，此基准点相对于 box 是静止的。而 margin 的数值，就是 box 相对于参考线的位移量。

在 margin 中 top、right、bottom、left 的参考线并不一致为一类，而是分为了两类参考线，top 和 left 的参考线属于一类，right 和bottom 的参考线属于另一类。那他们到底各以什么为参考线呢？top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。right 以元素本身的 border 右边为参考线水平向右位移；bottom 以元素本身的border 下边为参考线垂直向下位移。从上我们可以看到 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。上面的位移方向是指 margin 数值为正值时候的情形，如果是负值则位移方向相反。

或许理论听起来比较枯燥，我们举例说明一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div {
        width:200px;
        height:200px; 
        background:#ccc;
}
</style>
</head>    

<body>
        <div>外边距的margin-width的值类型有：auto | length | percentage</div>
</body>
</html>

如上代码，很简单，为了方便我们看到效果，我们给 div 设置了宽度和高度以及背景色。

现在我们给 div 的样式加上 margin 属性，比如：

margin:-10px 20px -30px 40px;

这时候 margin 的解析逻辑是怎样的呢？首先我们要搞清 div 的和周边元素的关系，div 没有相连元素，而此时 div 的 containing block 是 body 产生的 block box。则根据上面介绍的参考线原理，div 的左外边距以 containing block 的 content 左边为参考线，及此时以 body 的 content 左边为参考线进行水平向右位移，位移的大小为 40px，同理，上边距以 body 的 content 上边为参考线进行垂直向上位移 10px（负值和正值的方向相反），下边距依照现在 div 的 borer 下边（此时的 div 已经经过上边距位移过了）垂直向上位移 30px（此时，margin 不会改变 box 的 border 内的物理大小，但会改变 box 的逻辑大小，即：以此 box 的 margin 的下边为参考的元素，不是从 box 的物理位置开始的，而是从逻辑位置开始），右边距依照现在 div 的 borer 右边（此时的 div 已经经过左边距位移过了）水平向右位移 20px。或许有朋友问你分析的顺序怎么和 margin 表达式中出现的顺序不一样？如果按照 margin 表达式中出现的顺序来分析，结果是一样的，只是为了更好的方便大家的理解而没有按照表达式的顺序来分析。

用 margin 最后的实际显示大小的到底是怎么样呢，或许有朋友也比较疑惑，我暂时用逻辑大小和物理大小来区分（其实上面已用到此概念），到底什么是逻辑大小，什么是物理大小呢？！具体可以看图，物理大小指的是除去 margin，也就是包含 border 以内的 box 大小，而逻辑大小，则是 box 通过 margin 解析规则解析后得到的大小（这或许可以解释为什么IE5会错误解析盒模型）。在上图中，box 的实际显示的宽度等于 box 的逻辑大小，而 box 实际显示的高度等于 box 的物理大小，这说明 box 实际显示的大小可能是 box 的逻辑大小，也可能是 box的 物理大小，规则到底是怎样的——

box 的实际大小 = box 的物理大小 + 正的 margin

这仅对元素本身有效，对于其后面的相关元素，他们则只以 margin 的逻辑大小为准则，进行布局。

有朋友反应，听得很迷糊，越看越不懂，如果你对具体的理解过程不感兴趣的话，那记住下面我总结的结论就可以了，XD

结论：

box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。而负的 margin 值不会影响 box 的实际大小，如果是负的 top 或 left 值会引起 box 的向上或向左位置移动，如果是 bottom 或 right 只会影响下面 box 的显示的参考线。

这篇文章发表2007年3月18日 上午 10:01，并被分类于HTML/CSS/XML/XSL。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表您的评论，或者在您自己的网站中 引用（trackback） 该篇日志。

【转】深入理解margin的更多相关文章

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

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

  2. CSS外边距属性，深入理解margin

    margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...

  3. 理解Margin边距塌陷与box-sizing的问题

    父与子塌陷问题 子盒子与父盒子相互影响,margin值会重叠,谁大听谁的 运行结果: box-sizing box-sizing 原始属性值: content-box,该属性对于盒子尺寸来说,并不会让 ...

  4. 理解margin

    margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定 ...

  5. 理解margin负值

    效果 上和左方的margin负值使元素向上和左方向移动,如果该元素position不是absolute或fixed,这还会导致之后的元素也向上,左移 下和右方的margin负值会缩小下和右方的空间,使 ...

  6. 左侧固定，右侧自适应的布局方式理解margin负值理论

    一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...

  7. css-深入理解margin和padding

    最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...

  8. CSS深入理解学习笔记之margin

    1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...

  9. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

随机推荐

  1. Unity C# 自定义TCP传输协议以及封包拆包、解决粘包问题

    本文只是初步实现了一个简单的TCP自定协议,更为复杂的协议可以根据这种方式去扩展. TCP协议,通俗一点的讲,它是一种基于socket传输的由发送方和接收方事先协商好的一种消息包组成结构,主要由消息头 ...

  2. TCP的核心系列 — SACK和DSACK的实现（五）

    18版本对于每个SACK块,都是从重传队列头开始遍历.37版本则可以选择性的遍历重传队列的某一部分,忽略 SACK块间的间隙.或者已经cache过的部分.这主要是通过tcp_sacktag_skip( ...

  3. TCP的核心系列 — 重传队列的更新和时延的采样（一）

    重传队列实际上就是发送队列(sk->sk_write_queue),保存着发送且未确认的数据段. 当有新的数据段被确认时,需要把这些段从重传队列中删除,同时更新一些变量,包括 packets_o ...

  4. java 编程性能调优

    一.避免在循环条件中使用复杂表达式 在不做编译优化的情况下,在循环中,循环条件会被反复计算,如果不使用复杂表达式,而使循环条件值不变的话,程序将会运行的更快. 例子: import java.util ...

  5. ExtJS：文件上传实例

    ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...

  6. java语法部分一些小问题

    由于本人是个初学者希望自己的文章不会误导广大"群众",如果有错误之处还望前辈指出.谢谢! 一.键盘录入. A:导包 格式: import java.util.Scanner; 位置 ...

  7. MinHash 原理

    最小哈希原理介绍 MinHash是基于Jaccard Index相似度(海量数据不可行)的算法,一种降维的方法A,B 两个集合:A = {s1, s3, s6, s8, s9}  B = {s3, s ...

  8. BP 神经网络

    BP(Back Propagation)网络是1986年由Rumelhart和McCelland为首的科学家小组提出,是一种按误差逆传播算法训练的多层前馈网络,是目前应用最广泛的神经网络模型之一.BP ...

  9. Android 图片加载库Glide 实战（二），占位符，缓存，转换自签名高级实战

    http://blog.csdn.net/sk719887916/article/details/40073747 请尊重原创 : skay <Android 图片加载库Glide 实战(一), ...

  10. HBase 二级索引与Join

    二级索引与索引Join是Online业务系统要求存储引擎提供的基本特性.RDBMS支持得比较好,NOSQL阵营也在摸索着符合自身特点的最佳解决方案. 这篇文章会以HBase做为对象来探讨如何基于Hba ...