当前位置：首页 → 问答吧 → margin问题

margin问题

时间：2011-08-10

来源：互联网

为什么子元素设置margin-top在标准浏览器中却显示父元素的margin-top；IE6下却正常显示。换成padding就没问题了，但是有时候不一定适合用padding；或者加个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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} </style> </head> <body> <div style=" background:blue; height:100px;"> </div> <div style=" width:125px; height:200px; background:url(http://gg.blueidea.com/2010/blueidea/h_tshirt.gif); margin:0; padding:0; "><div style=" background:#000; margin-top:10px; width:50px; height:50px;"></div></div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 onionlik 于 2011-8-10 13:08 编辑 ]

作者: onionlik 发布时间: 2011-08-10

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级

作者: cycloned 发布时间: 2011-08-10

引用:

原帖由 cycloned 于 2011-8-10 13:15 发表
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的 ...

找了下，似乎给父元素加个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>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} </style> </head> <body> <div style=" background:blue; height:100px; "> </div> <div style=" width:125px; height:200px; background:url(http://gg.blueidea.com/2010/blueidea/h_tshirt.gif); margin:0; padding:0; overflow:hidden; "><div style=" background:#000; margin-top:10px; width:50px; height:50px;"></div></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: onionlik 发布时间: 2011-08-10

边距重叠问题，给父元素增加 display: inline-block; 或者overflow:hidden;或一个边框，或padding。

作者: yoom 发布时间: 2011-08-10