使用font-size：0 来去掉inline-block元素之间的空隙方法

像下面图中的布局，如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。下面是inline-block兼容的代码： view sourceprint?display:inline-block;*display:inline;*zoom:1;width:100px;vertical-align:top; 但是大家有没有发现，在firefox，safari，opera，ie8+中的 inline-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 inline-block 元素间的换行符去掉，这3px的间距就会消失了。有没有在不影响代码美观的情况下去掉间距尼，答案是有的。可以在inline-block的父元素中加上 font-size：0；然后在 inline-block讲字体设回来。复制代码代码如下: view sourceprint?<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> *{margin:0;padding:0;} body{font:400 12px/1.5 arial,sans-serif} li,.inline-block{display:inline-block;width:100px;background:#cdcdcd;font-size:12px;*display:inline;*zoom:1;vertical-align:top;} view sourceprint? .box{margin-top:10px;} .font0{font-size:0;} </style> </head> <body> <h1>写成一行的 line-block</h1> <ul> <li>我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</li><li>我是inline-block 我是inline-block 我是inline-block</li> </ul> <div class="box"> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div><div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <h1>有换行符的 line-block</h1> <ul> <li>我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block</li> </ul> <div class="box"> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> </div> <h1>父级使用了font-size:0的 line-block</h1> <ul class="font0"> <li>我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block我是inline-block 我是inline-block 我是inline-block</li> <li>我是inline-block 我是inline-block 我是inline-block</li> </ul> <div class="box font0"> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block</div> <div class="inline-block">我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block 我是inline-block</div> </div> </body> </html>

　　推荐阅读

　　DIV+CSS 全屏垂直居中的一个办法

例如下边的例子！我是先定了一个点在中间，然后再把里边的这一块居中处理； <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:#FFCC33;border:1px solid #0>>>详细阅读

本文标题：使用font-size：0 来去掉inline-block元素之间的空隙方法

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

1/2 1