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

最新推荐文章于 2023-01-17 00:03:34 发布

dragon_fire

最新推荐文章于 2023-01-17 00:03:34 发布

阅读量533

点赞数

分类专栏： div+css

div+css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用CSS实现九宫格布局的方法，通过合理设置元素的浮动和边距属性，确保不同浏览器下都能保持一致的外观效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

　　九宫格的效果如下：

下面我们开始HTML编码：

Example Source Code [www.52css.com]

　　下面是CSS编码：

Example Source Code [www.52css.com]

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;
}

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

Example Source Code [www.52css.com]

看最终的效果：

<!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>

<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>