基于CSS盒模型中的margin属性解析

陈桂霞

摘要：因特网的迅速发展使得HTML 排版界面效果的局限性日益明显。DIV+CSS解决了网页界面布局的难题，成为当前网页布局方式中的主流技术。而CSS盒模型更是这一技术中的重要概念，在CSS盒模型的属性中，margin属性尤为重要，它几乎可以设置在任何元素上，在使用的时候也容易出现一些问题，本文将通过实例对margin 属性进行详细解析。

关键词：CSS；盒模型；margin

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2016）36-0074-02

现在，CSS已经发展得非常成功了，无论是在浏览器还是应用商店，甚至聊天客户端，CSS都无处不在并且没有任何消退的迹象。CSS也叫层叠样式表（Cascading Stylesheet），在页面制作时采用 CSS 技术，可以控制文本的颜色、字体的样式、段落的间距、背景的图像颜色以及其他各种视觉效果。其主要优势在于，相同的CSS可以用在多个页面上。当CSS与HTML、XHTML结合使用时，CSS展现出了强大的能力。

CSS盒模型，是基于CSS的Web设计中非常重要的概念，因为盒模型是CSS定位布局的核心内容。盒模型是针对HTML元素的一组规则，制定了元素的高度、宽度、内边距、边框和外边距是如何度量的，下面从盒模型是什么开始讲起。

1 CSS盒模型概念

XMTML中大部分的元素（特别是块状元素），都可以看作是一个盒子，而网页的元素定位实际就是这些大大小小盒子在页面中的定位。当某个块状元素被CSS设置了浮动属性，这个盒子就会自动排到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题。为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和盒子非常相似，盒子中的内容到盒子的边框之间的距离及填充（padding）；盒子本身有边框（border）；盒子边框外和其他盒子之间有边界（margin），效果如图1所示。

图1 盒模型示意图

大多数XHTML元素的结构都类似于图一所示，除了包含的内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。我们在布局网页和定位XHTML元素时要充分地考虑这些要素才可以更加自如地摆弄这些盒子。下面我们就重点讲一讲盒子的外边距margin属性的应用。

2 CSS盒模型中的margin属性

margin属性应用于盒子外面的空间，或者是位于盒子和浏览器窗口之间的区域，又或者是位于盒子和文档中其他元素之间的区域。表一显示了各种margin属性。margin属性是margin-top、margin-right、margin-bottom和margin-left四个单独属性的简写属性。值得注意的是盒模型简写属性总是以顺时针方向指定，从top开始： top、right、bottom和left。

2.1 margin 的基本写法

表达式：margin：top right bottom left；

margin属性值是数值单位，可以是长度、百分比或 auto，margin 甚至可以设为负值，造成 BOX与BOX之间的重叠显示。

例如：margin：70px 100px 50px 100px；可以看到这个语句给相应内容设置了有70px上外边距，100px的左右外边距和50px的下外边距的BOX。

margin 在书写时可以省略参数，基本原则如下：

1）如果没有left值，则默认使用right值替代；

2）如果没有bottom值，则默认使用top值替代；

3）如果没有right值，则默认使用top值替代。

例如：margin：50px 100px；这个语句等同于

margin：50px 100px 50px 100px；

margin：50px；这个语句等同于

margin：50px 50px 50px 50px；

2.2 margin 边界折叠问题

在CSS中，当两个或多个BOX的上或下外边距接触时，会产生外边距折叠。只有垂直margin会折叠，水平margin不会。相邻两个BOX折叠后的最终margin 值计算方法如下：

1）两者都为正值，取值大者；

2）值有正负，两者都取绝对值，再用正值减去最大绝对值；

3）全为负值，两者都取绝对值，再用 0 减去最大绝对值。

如果一个子元素的外边距直接接触到父元素的外边界，也会发生margin折叠。如上算法，较大的外边距是胜利者，胜利的外边距总是应用到父元素，子元素的margin总是被折叠。因此，如果可以防止两个外边距相互接触，那么margin折叠就可以避免。可以通过对父元素使用内边距或者边框来防止两个外边距接触。

但是在一些特殊情况或是一些设置前提下，盒模型的垂直 margin不会被折叠。如果相邻的盒模型中，其中一个是浮动的（floated），那么垂直 margin则不会被折叠，而且这个浮动盒模型的里的子元素之间也不会折叠；设置了display：inline-block 的元素，包含它的子元素，它们的垂直margin都不会被折叠；设置了绝对定位position：absolute的盒模型和它們的子元素，垂直margin不会被折叠。还有一些特殊情况下，盒模型的垂直margin也不会被折叠，这里不一一赘述。

2.3 margin的解析逻辑

在盒模型margin中，top、right、bottom、left的基准线并不是统一的，而是分为了两类基准线，top和 left的基准线属于一类，right 和 bottom 的基准线属于另一类。top 以盒模型的上边线为基准线垂直向下移动；left 以盒模型的左边线为基准线水平向右移动。right以盒模型本身的border-right为基准线水平向右移动；bottom以盒模型本身的 border-bottom为基准线垂直向下移动。

margin属性的这个特点常常被用来水平对齐元素。我们可以通过结合auto关键字和盒子元素的左或右外边距来对齐文档中的元素。

例如：body{

width：600px；

margin：1em auto；}

这个示例中，设置了body元素的margin属性，将上下外边距设为1em，将左右外边距设为auto。使用一个宽度值后，这种设置的结果是使文档的正文居中显示。一个盒模型在水平方向上所占的宽度，是由margin、 width和padding的值决定，值得注意的是：这些值中， margin-left、margin-right 和width可以设为 auto，如果将margin-top、margin-bottom设置为auto，则会被系统忽略，我们可以将auto理解为：弥补其他部分与所要求总合之间的差别。

CSS 盒模型是 CSS 网页布局技术中一个基础又非常重要的概念，深刻理解盒模型的结构对于进一步掌握CSS技术有着重要的意义。而CSS盒模型中的margin属性在网页布局中有着举足轻重的地位，如何让网页设计更合理，首先应该掌握CSS盒模型的margin属性。我们在今后的实践中会不断尝试和探索，去发掘CSS盒模型更大的用途和魅力。

参考文献：

[1]Lan Pouncey， Richard Youk.CSS入门经典[M].3版.北京：清华大学出版社，2012.

[2]Andy Clarke.超越CSS：Web设计艺术精髓[M].北京：人民邮电出版社，2012.

[3]巴德.精通 CSS：高级Web标准解决方案[M].北京：人民邮电出版社，2010.

[4]施密特.CSS Web设计高级教程[M].北京：清华大学出版社，2009.