找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1876|回复: 7

[求助] h标签看不到margin

[复制链接]
发表于 2010-9-18 10:22:09 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. </head>

  7. <style type="text/css" media="all">
  8.    *{padding:0px; margin:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif,"宋体"}
  9.    .clear{clear:both}
  10.    img{ border:0px}
  11.    
  12.    /*我设置box的大小,并设置padding-top=50px,我想在它里面放一个h标签,设置它上边距margin为5px,我发现在IE78标准,但在IE6里发现只有当h的margin大于上面的padding时候(>50px)才能看到margin??!!当然我是可以把盒子的padding-top改大一点就没事了不去设置h的margin,有谁知道这是为什么吗???????*/
  13.    #show{
  14.    margin:10px auto;
  15.    width:180px;
  16.    height:300px;
  17.    background:url(login.jpg) no-repeat center top #009999;
  18.    padding-top:50px;                           
  19.    }
  20.    
  21.    h2{
  22.    margin:5px 10px;   
  23.    }  

  24. </style>

  25. <body>
  26. <div id="show"><h2>测试</h2></div>
  27. </body>
  28. </html>
复制代码
发表于 2010-9-18 13:03:41 | 显示全部楼层
为什么要 #show里设 padding-top 而h2还margin

#show{
   margin:10px auto;
   width:180px;
   height:300px;
   background:url(login.jpg) no-repeat center top #009999;            
   }
   
   h2{
   margin:55px 10px 5px 10px;   
   }
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-9-18 15:25:20 | 显示全部楼层
原帖由 [i]cjj 于 2010-9-18 13:03 发表
为什么要 #show里设 padding-top 而h2还margin

#show{
   margin:10px auto;
   width:180px;
   height:300px;
   background:url(login.jpg) no-repeat center top #009999;            
   }
   
   h2 ...

你到底会不会偶??!!就事论事
回复 支持 反对

使用道具 举报

发表于 2010-9-18 16:39:35 | 显示全部楼层
这个应该是css box的margin叠加造成的,你可以尝试把外部容器的高度 height:300px;去掉,把padding-top:50px去掉,在firebug中你看   #show容器你就会发现h2的margin是没有体现出来的,这个是因为   #show的margin比h2的大,添加去大值造成的!

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 wyysf 于 2010-9-18 16:45 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-9-19 17:28:59 | 显示全部楼层
margin叠加
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-9-23 10:54:27 | 显示全部楼层
原帖由 [i]liu19874233 于 2010-9-19 17:28 发表
margin叠加



这个不应该叫margin叠加,不是上下两个margin那种形式,估计应该叫“塌陷”。

都解释的模棱两可的,自己解决
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-9-23 17:54:55 | 显示全部楼层

都是TMD错误解释!

原帖由 [i]wyysf 于 2010-9-18 16:39 发表
这个应该是css box的margin叠加造成的,你可以尝试把外部容器的高度 height:300px;去掉,把padding-top:50px去掉,在firebug中你看   #show容器你就会发现h2的margin是没有体现出来的,这个是因为   #show的margin比 ...


你说的不对!!这个不是塌陷,老大我。innerbox是在里面,是父子关系,不是兄弟关系,你的解释我明白,肯定不是这样的
回复 支持 反对

使用道具 举报

发表于 2010-9-23 23:17:34 | 显示全部楼层
大概楼主是不知道父子关系的两个元素也是可以发生外边距叠加的吧!!但这里的确不是边距叠加的问题,因为有padding-top把它们隔开了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-2-28 09:30 , Processed in 0.065945 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表