css 空白外边距互相叠加的解决方法

先看如下demo代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>空白边距叠加demo@Mr.Think</title> <style> body{width:300px; font-family:'微软雅黑'; font-size:1em; text-indent:10px; line-height:1.25} div{background:#a40000;margin:10px} div p{background:#eee;margin:15px} </style> </head> <body> <div><p>空白边距叠加demo@Mr.Think</p></div> </body> </html> 提示：您可以先修改部分代码再运行这是一个div元素内嵌套p的简单样例,先别复制保存为html测试,在你看完上面的代码后,你是否以为它出为你呈现如下图的效果? 好,现在你可以复制上面代码,保存到本地,然后在浏览器中打开.你会惊讶的发现,它呈现给你的效果是这样的:为什么会这样呢?按CSS中,对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离.故,子元素的顶部和底部空白边就突出到元素的外围了.p元素的15px外边距与div元素的10px的外边距形成一个单一的15px垂直空白边,另外,形式的这个空白边并非为div所包围,而是呈现在div的外围.所以,我们看到了第二张效果图.如何解决?本人比较推荐两种解决方式:其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transprent;其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px另外,还可以通过外围元素绝对定位,或者定义子元素浮动等方式实现.

　　推荐阅读

　　IE7,IE8 BUG导致CSS下载二次的解决方法

测试：正常的CSS加载代码写法： <link rel="stylesheet" href="http://www.test.com/main.css" type="text/css" /> 这样写大家都知道加载是不会有任何问题的，所以也不贴监控图解释了。在经过html压缩后(去掉h>>>详细阅读

本文标题：css 空白外边距互相叠加的解决方法

地址：http://www.17bianji.com/kaifa2/CSS/16561.html

1/2 1