span之间的空隙的原因和解决办法
span之间的空隙，到底是什么？display:inline-block的元素虽然能够处于同一行，但是很变态的是它们之间出现了空格，如何处理？
（例如在浮动元素居中当中，我们必须使用display:inline-block）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <meta charset="UTF-8"/> <title>内敛元素的间隙-独行冰海</title> <style> *{margin: 0;padding: 0;} .con{ width: 300px; height: 24px; margin: 10px auto; border: 1px solid #f00; font-size: 14px; line-height: 24px; } span{ border-right: 1px solid #00f; } </style> </head> <body> <div class="con"> <span>独行冰海</span> <span>内联元素</span> <span>小空隙</span> </div> </body> </html> |
代码预览
左侧有明显的空隙
原因：
内联元素在html中换行的同时会产生一个文本节点，可以使用负值的margin-right或者letter-spacing + word-spacing来解决这个问题，或者使用float，不考虑chrome可使用font-size基本解决。
代码预览
浮动之后：
inline-block用于块对象的横向排列（如图片组），其有着一些float不可替代的作用（如不错位、可垂直居中等），但在实际应用中，还是存在一个很纠结的弊端，有缝。
解决方法：
1. 缝隙的宽度与文字大小相关，缝隙就如同一个文本节点，字越大，缝隙也就越大。
2. 这个文本节点是由于换行产生的，故，如果span和span之间或li与li之间不存在换行，那就没必要这么罗嗦了。
3. 示例中采用了font-family:’微软雅黑’（也可以是simsun-宋体），这是因为在等宽字体的情况下，各浏览器对这个文本节点的宽度就很一致了：0.5em
推荐一款焦点图jQuery插件 SlidesJs PHP URL参数获取方式的五种例子
