当li设置为line-block时,元素之间出现间隙的原因和解决方法
原因
因为浏览器默认把inline元素之间的空白符(Tab、空格、换行)渲染成一个空格。而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙。
用Chrome浏览器将场景模拟出来:
HTML:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
CSS:
li { display: inline-block;
border: 1px solid red; }
在浏览器打开页面,如下图,li元素之间产生了间隙。
解决办法
1、从根本原因上找解决方案,既然li元素间的间隙是因为换行符导致的,则可以将li写成一行。
<ul> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> </ul>
但该方案会导致HTML的代码可读性较差,一般不建议用此方法;
2、用margin去掉元素间隙。
li { display: inline-block; border: 1px solid red; margin-left: -6px; }
但因为每个浏览器的间隙不一样,导致margin-left的值也需不一样,存在浏览器兼容性问题,同样不建议用此方案;
3、用浮动去掉元素间隙。
li { display: inline-block; border: 1px solid red; float: left; }
4、将li的父级元素font-size设置为0,再在li中将font-size设置为正常值。
ul { font-size: 0; } li { display: inline-block; border: 1px solid red; font-size: 14px; }