div内部块级元素设置外间距（margin）对其的影响

caiceclb

浏览: 242624 次
性别:
来自: 郑州

最近访客更多访客>>

nucleus

f0rb

Mr_冰凉

raolongbao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XHTML CSS

Opera CSS XHTML IE ASP

div内部块级元素，比如p,div，设置外间距（margin）的话会怎样（IE6正常，此处建立在标准浏览器基础之上，测试环境：FF，Opera）。本来还纳闷div莫名奇妙的怎么多出了一些外边距，甚至设置margin为0，都不能解决问题。到底是怎么回事呢。看示例：

<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
	div {margin:0;padding:0;} 
	#top,#bottom {background:red;}
	#bottom{background:green;}
	p{margin:20px;margin:0;}
	#div {margin:30px;margin:0;}
  </style>
 </head>

 <body>
  <div id="top">
	<p>p-tag margin<p>
  </div>
  <div id="bottom">
	<div id="div">div margin</div>
  </div>
 </body>
</html>

此代码产生的是一个可以预料到的结果，看截图：

预想中的效果，没问题

针对css修改一下，看这两句：

/* 此时margin为0，效果OK */
p{margin:20px;margin:0;}
#div {margin:30px;margin:0;}

/* 接下来先去掉p标签的margin:0;让前面的定义生效 */

p{margin:20px;}
#div {margin:30px;margin:0;}

结果呢，效果截图：

有点奇怪，预料中，p-tag为id=top的div的子元素，应该是把top div 撑大才对，top div并没有限制高度啊。

结果就是top div 多出了外边距。那么换#div 去掉margin:0的限制，p加上margin:0；结果还是这样。就是说，不仅仅是p标签会引起这样的问题，故猜测所有的块级元素都会这样的。

当时布局时，FF下就出现了此种现象（但Opera正常。。。），但是没找到什么原因，后来再次次碰到，总算摸到规律了。

既然知道这样会引起问题，那么就可以避免这种布局写法。实在不能避免呢？巧合中，我找到了一种解决方法。

第一次碰到这种现象时，由于不知道原因，很纳闷，firedebug也看不出什么问题，而我有个习惯就是给元素加border看范围。一加border不要紧，居然修正了bug？！但是，这个border怎么办，不是所有的元素需要border的，于是加1px border的同时设置margin:-1px;这样就可以了，另外border的颜色设置和背景一样，防患于未然。

下面就是解决方案（除非你避免这种情况）：

<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript">
  <!--
  //-->
  </script>
  <style type="text/css">	
    div {margin:0;padding:0;} 

/* 这里添加修正代码  border:1px solid #000;margin:-1px*/
	#top,#bottom {background:red; border:1px solid #000;margin:-1px;}
	#bottom{background:green;}
	p{margin:20px;}
	#div {margin:30px;margin:0;}

  </style>
 </head>

 <body>
  <div id="top">
	<p>p-tag margin<p>
  </div>
  <div id="bottom">
	<div id="div">div margin</div>
  </div>
 </body>
</html>

效果预览：

问题修正了

虽然还有border，但是-1px的margin至少不让宽度和高度增加，加入border颜色和背景一致也看不出来了。

2009年7月20日11:50:01

恼火，终于搜到一个解决方法，奇怪，当初我也是这么加的属性貌似没生效啊，今天却生效了。。。

http://www.women8.cn/Skill/Info.asp?infoid=24,参考资料，不是说的，这种问题的关键词还挺难想，搜出来，偶刚发的这篇还能排的上号。。。。。。

写这篇文章的人还真搞笑，知道解决方法，却不会组合。。。。偶下面组合一下，就全面兼容了：

#top {
    overflow:hidden; /* 针对FF，Opera有效 */
    zoom:1; /* 对IE有效 */
}

查看图片附件

0
顶

0
踩

分享到：

弹出层区域外点击退出的实现 | CSS巧用text-shadow做图片阴影（小小研究 ...

2009-07-17 19:02
浏览 12793
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论