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

本文介绍了一种使用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编码:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<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编码:

div css xhtml xml Example Source Code 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以外的地方加上一些内容,并进行控制。如:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<br style="clear:both; height:1px; line-height:1px; overflow:hidden;" />

 

看最终的效果:

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值