CSS属性探秘系列(六)：margin

一、属性介绍

marg 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
可取值
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比计算的外边距。
herit 规定应该从父元素继承外边距。

二、常见问题

1.IE6下浮动元素双倍边距问题
解决方法
IE6中设置block元素display:le;
.l{marg-left:20px;float:left;display:le;}
原因，le元素和le-block元素是没有双倍边距的。对le元素设置float后，会有个haslayout,使le元素具有le-block元素的特性，进而可以设置垂直marg、paddg、width、height。

2.marg外边距合并问题
外边距的合并发生在以下三种情形
情形一空块元素
a)如果一个块级元素没有border、paddg、le content、height、m-height来分隔，设置marg-和marg-bottom属性后会合并,

b)实例

从上例可以看出，.out puted height为40px;
>=IE8、Firefox、Chrome测试效果相同。有个疑问，去掉out的边框后，其高度计算为0，不知道什么原因？

情形二父元素与第一个或一个子元素
如果块元素的 marg- 与它的第一个子元素之间没有border, paddg, le content, 或 clearance 分隔，或者块元素的 marg-bottom 与它的一个子元素之间没有paddg, le content, height, m-height, or max-height 分隔，那么外边距会合并。

>=IE6,FF,Chrome效果效果相同，此时ner01的marg-:并没有起作用，这就是为什么很多人在网上问，我设置marg-,marg-bottom不起作用的原因了！如下图

情形三毗邻的元素

>=IE6,FF,Chrome效果效果相同,重叠部分的取值为marg-,marg-bottom中的最大值。如下图

此时我们看到重叠也有重叠的好处

注只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3.marg不起作用的情况？
行内(le)元素设置垂直marg不起作用，块级元素的marg不好用时，建议使用paddg来代替。

三、常见marg负值应用

1.IE6背景半透明效果按钮的制作
其就是使用marg负值定位实现按钮下半部分的颜色

2.新闻列表(带日期的)
这个是从新浪博客首页看到的实现新闻列表

ul li{height:24px;le-height:24px;}
设置.date{text-align:right;display:block;marg-:-24px;},这时就不需要使用浮动来布局了

3.在选项卡等边框线的处理
当前选中的选项卡下边框颜色要设置选中色，内容的div上边框要设置marg-:-1px;

4.图片与文字对齐问题
方法一
vertical-align:text-bottom
方法二
.img{marg:0 5px -2px 0;}
测试代码

四、新闻列表边框

当我们使用ul>li写新闻列表需要给li设置下边框时，是不是经常困惑于一条会多出一个边框。如果给一条单独加个类.last{border-bottom:none;}
也能实现效果。这中写法会有两个弊端，弊端一单独定义一个css类；弊端二，当我们使用服务器端语言输出数据时，还需要单独判断一项，添加calss类。有没有好的解决方法呢？有，那就是marg负值！
看看狼蚁网站SEO优化实现实例

如图

五、参考链接

http://.w3school../css/css_marg_collapsg.asp