inline-block元素的空白间距
html代码
<!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>无标题文档</title> <style type="text/css"> .outer{ height:40px; width:260px; border:1px solid green; } ul{ list-style:none; margin:0; padding:0; border:1px solid red; padding:10px; } ul li{ border:1px solid green; width:300px; display:inline-block; } </style> </head> <body> <div class="outer"> <a href="#" title="行内元素">行内元素</a> <a href="#" title="行内元素">行内元素</a> <a href="#" title="行内元素">行内元素</a> </div> <ul> <li>用display:inline-block取代float布局</li> <li>用display:inline-block取代float布局</li> <li>用display:inline-block取代float布局</li> </ul> </body> </html>
效果:
这种空白在要求不是特别严格的时候，其实无伤大雅，但又的时候我们就需要清除这些空白
清除的方法也是多种多样，我这里举出几个常用呀；
元素之间出现空白的原因是标签端之间的空白，各种方法去掉
方法一：改变html的布局方式
方式二：margin-right：-负值
方式三：外层容器font-size=0；有文字的容器，我们单独的设置font-size：想要的值
考虑到兼容性（chrome）；-webkit-text-size：none；（Safari下可问题依然存在）
还有方式n...........
最终查阅多方资料和实践，最兼容的写法：
.finally-solve{ letter-spacing:-4px;/*根据不同的字体字号或许要做一定的调整*/ word-spacing:-4px; font-size:0; } finally-solve ele{ font-size:16px; letter-spacing:normal; word-spacing:normal; display:inline-block; *display:inline; zoom:1; }
ps：
letter-spacing:10px;/*它改变的每个字母之间的间距不是单词之间的间距*/
word-spacing:30px; /*它改变的是每个单词之间的间距，仅仅限于英