CSS实例：元素之间margin边距控制的思路

　　有网友在的论坛提出疑问。各个元素之间有一个相等的边距。曾经用margin属性来控制相等的边距，可是由于各浏览器显示的效果不一样，不能达到要求。大家知道如何去做吗？

　　一般情况下，应用浮动和margin即可进行控制。
　　但很多门户类的网站，都应该了一个单独的div来实现这样的边框。但这并不可取。
　　合理的设置边距即可。
　　门户搜狐网站，作过一些分析。您可以参考这里：
　　http://www./search.asp?SearchContent=%E6%90%9C%E7%8B%90&searchType=title

　　但是还有一个问题，就是外边的边距如何实现。（由于浏览器的版本不同，显示的效果不一样）
　　版主是否可以做出一个类似于九宫格的布局范例，即每个元素的周围都有相等的边距。期待你的回复。

　　九宫格的效果如下：


　　下面我们开始HTML编码：

Example Source Code [www.]<div id="wrap">
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
    <div class="divCon"></div>
</div>
　　下面是CSS编码：

Example Source Code [www.]body {
    margin:0;
    padding:0;
}
#wrap {
    width:630px;
    height:630px;
    margin:0 auto;
    padding:10px 0 0 10px;
    border:1px solid #03c;
}
#wrap .divCon {
    float:left;
    width:198px;
    height:198px;
    margin:0 10px 10px 0;
    border:1px solid #999;
    background:#f1f1f1;
    display:inline;
}
　　这是一种将外边距转换为内边距以消除浏览器兼容性问题的思路。
　　
　　如果是整个wrap的外边距问题，需要给wrap以外的地方加上一些内容，并进行控制。如：

Example Source Code [www.]<br style="clear:both; height:1px; line-height:1px; overflow:hidden;" />
　　看最终的效果：

Source Code to Run [www.]

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）