CSS特性探秘系列(6)：margin

1、特性详细介绍

margin 特性接纳任何长度企业，能够是像素、英寸、毫米或 em。
可赋值：
auto 访问器测算外边距。
length 要求以实际企业计的外边距值，例如像素、厘米等。默认设置值是 0px。
% 要求根据父元素的宽度的百分比测算的外边距。
inherit 要求应当从父元素承继外边距。

2、普遍难题

1.IE6下波动元素双倍边距难题
处理方式：
IE6中设定block元素display:inline;
.l{margin-left:20px;float:left;display:inline;}
缘故：最先，inline元素和inline-block元素是沒有双倍边距的。对inline元素设定float后，会有个haslayout,使inline元素具备inline-block元素的特点，进而能够设定竖直margin、padding、width、height。

2.margin外边距合拼难题
外边距的合拼产生在下列3种情况：
情况1：空块元素
a)假如1个块级元素沒有border、padding、inline content、height、min-height来隔开，设定margin-top和margin-bottom特性后汇合并,

b)案例：

从上例能够看出，最终.out computed height为40px;
>=IE8、Firefox、Chrome检测实际效果同样。可是有个疑惑，去掉out的边框后，其高宽比测算为0，不知道道甚么缘故？

情况2：父元素与第1个或最终1个子元素
假如块元素的 margin-top 与它的第1个子元素之间沒有border, padding, inline content, 或 clearance 隔开，或块元素的 margin-bottom 与它的最终1个子元素之间沒有padding, inline content, height, min-height, or max-height 隔开，那末外边距汇合并。

>=IE6,FF,Chrome实际效果实际效果同样，此时inner01的margin-top:并沒有起功效，这便是为何许多人在网络上问，我设定margin-top,margin-bottom不起功效的缘故了！以下图：

情况3：紧邻的元素

>=IE6,FF,Chrome实际效果实际效果同样,重合一部分的赋值为margin-top,margin-bottom中的最大值。以下图：

此时大家看到重合也是有重合的益处

注：仅有一般文本文档流中块框的竖直外边距才会产生外边距合拼。行内框、波动框或肯定精准定位之间的外边距不容易合拼。

3.margin不起功效的状况？
行内(inline)元素设定竖直margin不起功效，块级元素的margin不太好用时，提议应用padding来替代。

3、普遍margin负值运用

1.IE6情况半全透明实际效果按钮的制做
其便是应用margin负值精准定位完成按钮下半一部分的色调

2.新闻目录(带时间的)
这个是重新浪blog主页看到的完成新闻目录

ul li{height:24px;line-height:24px;}
设定.date{text-align:right;display:block;margin-top:⑵4px;},这时候就不必须应用波动来合理布局了

3.在选项卡等边框线的解决
当今选定的选项卡下边框色调要设定选定色另外，內容的div上边框要设定margin-top:⑴px;

4.照片与文本对齐难题
方式1：
vertical-align:text-bottom
方式2：
.img{margin:0 5px ⑵px 0;}
检测编码：

4、新闻目录边框

当大家应用ul>li写新闻目录必须给li设定下边框时，是否常常疑惑于最终1条会多出1个边框。假如给最终1条独立加个类.last{border-bottom:none;}
也能完成实际效果。可是这中写法会有两个缺点，缺点1：独立界定1个css类；缺点2，当大家应用服务器端語言輸出数据信息时，还必须独立分辨最终1项，加上calss类。有木有好的处理方式呢？自然有，那便是margin负值！
看看下面完成案例：

如图：

5、参照连接

http://www.w3school.com.cn/css/css_margin_collapsing.asp