有网友在52CSS.com的论坛提出疑问。各个元素之间有一个相等的边距。曾经用margin属性来控制相等的边距,可是由于各浏览器显示的效果不一样,不能达到要求。大家知道如何去做吗?
一般情况下,应用浮动和margin即可进行控制。
但很多门户类的网站,都应该了一个单独的div来实现这样的边框。但这并不可取。
合理的设置边距即可。
门户搜狐网站,52CSS.com作过一些分析。您可以参考这里:
http://www.52css.com/search.asp?SearchContent=%E6%90%9C%E7%8B%90&searchType=title
但是还有一个问题,就是外边的边距如何实现。(由于浏览器的版本不同,显示的效果不一样)
版主是否可以做出一个类似于九宫格的布局范例,即每个元素的周围都有相等的边距。期待你的回复。
九宫格的效果如下:
下面我们开始HTML编码:

<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编码:

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;
}
这是一种将外边距转换为内边距以消除浏览器兼容性问题的思路。
本文作者:52CSS.com 如需转载请建立本站链接(http://www.52css.com/),并且不得随意改动文章内容、保留此版权声明文本!
如果是整个wrap的外边距问题,需要给wrap以外的地方加上一些内容,并进行控制。如:

看最终的效果:
<!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=gb2312" />
<title>CSS实例:元素之间margin边距控制的思路 - www.52CSS.com</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<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>
<p style="text-align:center;">本文作者:<a href="http://www.52css.com/">52CSS.com</a> 如需转载请建立本站链接(<a href="http://www.52css.com/">http://www.52css.com/</a>),并且不得随意改动文章内容、保留此版权声明文本!</p>
</body>
</html>