+ -
当前位置:首页 → 问答吧 → 如何解决外边距叠加?

如何解决外边距叠加?

时间:2011-08-21

来源:互联网

上面div的margin-bottom:10px;
下面div的margin-top:10px;
这样他们的外边距叠加了,有什么方法解决,最好不要转换成padding
<!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=utf-8" /> <title>Untitled Document</title> <style> *{ margin:0; padding:0; } </style> </head> <body> <div style="width:100px; background:#930; height:100px; margin-bottom:10px;"></div> <div style="width:100px; background:#f30; height:100px; margin-top:10px;"></div> </body> </html>
 提示:您可以先修改部分代码再运行

作者: alphat   发布时间: 2011-08-21

两个div之间插一个div:

<div style="height:20px;"></div>

就行了。

作者: zjgzfs   发布时间: 2011-08-21

这方法不好吧,添加的元素没有语义,而且不便于修改.

作者: alphat   发布时间: 2011-08-21