inline-block间隙的问题和其涉及到的问题
基本了解:
1.inline-block(行内块元素),是inline和block的混合体是在css2.1中新增的。行内块元素(替换元素)在行框内被视为行内元素,因此根据 CSS 的空白符处理规则,<!DOCTYPE html> <html> <head> <title> inline-block </title> <meta charset="utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,a{margin:0;padding:0;border:0 none;outline:0 none;} body{font:12px/1.5 Arial,sans-serif,"宋体";} .footerNav a{display:inline-block;background:#ff8000;width:100px;height:50px;margin-right:-0.5em;} .nav li{display:inline-block;*display:inline;*zoom:1;width:100px;height:50px;background:#65ca00;margin-right:-0.5em;*margin-right:0;} </style> </head> <body> <div class="footerNav"> <a href="">关于我们</a> <a href="">关于我们</a> <a href="">关于我们</a> <a href="">关于我们</a> <a href="">关于我们</a> <a href="">关于我们</a> </div> <ul class="nav"> <li><a href="">行业新闻</a></li> <li><a href="">企业动态</a></li> <li><a href="">行业新闻</a></li> <li><a href="">企业动态</a></li> <li><a href="">行业新闻</a></li> <li><a href="">企业动态</a></li> </ul> </body> </html>
解决方式:
1.所以只要设置为margin-right:-0.5em;就可以了,em是相对单位,是根据你当前容器的的字体大小来计算的,如果是12px, 0.5em = 6px 14px 0.5em =7px.
为了方便直接0.5em就可以了,不必要用px太设定了。
2.这个空白符其实只要不换行就不会产生,但为了代码可阅读性,谁会愿意把很多标签写在同一行。就为解决这个问题?(最快的,最省事的解决方式)
3.也可以利用letter-spacing和word-spacing属性,来解决这个问题。
4.也可以用font-size:0的方式来解决。
以上方式3.4没测过,我不是搞academic,因为1 的方式最快solution,3.4只是为以后闲的时候留个脚印,继续测。
PS:以上问题的描述性,有待考证。以上只作为个人笔记~只是个人理解和部分内容css权威指南上所说,IE6,7到底支不支持inline-block,还要细挖资料。
所以有问题,或者谁更了解,希望留言讨论,但不是很深很深的讨论,太费时间!
优质内容筛选与推荐>>