日期:2014-05-16  浏览次数:20554 次

元素换行产生空白间隙问题
(1)两个元素,其中一个是块级元素,则一定会换行,换行后,上下两个元素之间会产生空白间隙行
(2)两个都是行内元素,但是行内元素的宽度超过父元素的宽度则自动换行,换行后,上下两个元素之间会产生空白间隙行

我想知道这个空白间隙行产生的原因及解决方法,哪位大神知道的,给小弟讲解下,不甚感激。
------解决方案--------------------
应该是浏览器的默认样式。
firebug观察下元素的样式?
一般css开头重置样式表,加入 margin:0;padding 0;啥的,去掉默认的margin和padding
------解决方案--------------------
其实类似这样的问题,完全可以去避免,最头疼的就是明知不可为而为之
1)既然实现的效果不再一排显示,那么你完全可以两个块级元素,或者 浮动后设置宽度也行
2)子级超出父级,本身就带有兼容性问题,且在IE6下会撑开父级,你可以设置overflow:hidden

另外 显示为 diplay:inline-block;的元素,同排显示,代码换行会被解析,也就是所谓的空白间隙,没什么解决方案,就是浮动,你可以把浮动理解为升级版的 diplay:inline-block;