主站经典论坛家园作品品网维基桌面招聘

经典论坛 » WEB标准化专栏 » table对padding和margin的解释应该是怎么一回事的？

打印

[求助] table对padding和margin的解释应该是怎么一回事的？

本主题由 blank 于 2009-8-4 16:50 分类

yuanshi [楼主]

原始

高级会员

帖子: 1774
体力: 795
威望: 3
当前: 广东广州

专长 前端制作,策划,网站运营

1^# 大中小发表于 2006-4-13 22:46

先看一下这个例子先

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

在这个例子中没有给table设置相关属性；IE下和FF下无异。

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

在这个例子中给他加上了一个属性

复制内容到剪贴板

代码:

table{padding:50px;}

ie下没有变化，ff下符合要求的变化了；

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

在这个例子中给他加上了一个属性

复制内容到剪贴板

代码:

table{margin:50px;}

ie下变化了，FF下也按要求变化了。
但在ie的效果中，没有办法显示父元素的背景颜色。

现在的问题是：在ie下table是如何解释padding，和margin这两个元素的呢？？

创意设计

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

old9

银牌会员

认证
帖子: 653
体力: 1099
威望: 88
当前: 安徽合肥

专长 网页设计,前端制作,AS

2^# 大中小发表于 2006-4-14 06:24

padding：
IE不支持padding

margin：
table 的上下 magin 和 div 的 magin 重叠了，以至于伸出 div 的 margin 之外。
具体参考 CSS 规范中关于 margin collapsing 的部分，或者用这个关键字google一下也应该能找到很多相关内容。
按照规范而言，table 以及很多其他的 box 是不应该出现 margin collapsing 的，但 IE 的 border collapsing 是按照自己的一套规则处理的，这里就体现在它对 table 依然作了处理。
解决方法是给外围的 div 添加 layout，添加 layout 的方法有很多，比如赋予宽高，position:absolute，float，zoom等等。
关于 layout 的详细内容可以参考我最近翻译的一篇文章。

http://old9.blogsome.com 已被 GFW 封锁

TOP

PSD网页模板下载,高端实用 | 免费自助建站

boyr

初级会员

认证
帖子: 56
体力: 111
威望: 0
当前: 北京朝阳区
离线: 195 天

3^# 大中小发表于 2009-7-4 18:41

去掉*{
margin:0;
padding:0;
}
就没问题了。
进一步发现只要不是tr或者td{
margin:0;
padding:0;
}
就没问题了，谁能解释一下呢？

[ 本帖最后由 boyr 于 2009-7-4 18:46 编辑 ]

TOP

boyr

初级会员

认证
帖子: 56
体力: 111
威望: 0
当前: 北京朝阳区
离线: 195 天

4^# 大中小发表于 2009-7-4 18:50

好像明白了，原来table的padding不是指整体的表格范围，而是指所有包含在内的tr和td的padding。也就是说padding在IE下有继承性。

TOP

boyr

初级会员

认证
帖子: 56
体力: 111
威望: 0
当前: 北京朝阳区
离线: 195 天

5^# 大中小发表于 2009-7-4 19:08

其实这样解释更合理，就是：
IE只有td有padding属性，如果设置table，tr的padding，IE就取巧的设置所包含的td的padding。
如果已经设定td的padding为零，那么设置table，tr就不起作用了。
不知道IE8怎么样了。

TOP

haiofly

中级会员

帖子: 127
体力: 288
威望: 0
当前: 福建厦门
离线: 15 天

6^# 大中小发表于 2009-7-28 16:40

用了padding和margin 还有必要用table吗？

不过可以研究下，呵呵

TOP

sasumi

初级会员

认证
帖子: 100
体力: 198
威望: 0
当前: 广东深圳
离线: 1 天

专长 UI,JS,PHP

7^# 大中小发表于 2009-8-7 09:28

table 不是 box模型。一些属性与常见的标记是不一样的。包括里面的内部元素 tr td caption tbody tfoot th col colgroup等。

所以这些东西如果设置了但模型的 margin 或者 padding，就很可能出现奇形怪状的结果了。

TOP

‹‹ 上一主题 | 下一主题 ››