如何去除掉inline-block元素之间的默认间距
2017-04-10 14:50:13  By: shinyuu

• shinyuu
• CSS3教程
• 1
• 4409
• 0

前几天写一个页面、发现宽度为900px的div居然放不下3个宽度为300px的内联元素li、只好改用了float:left来布局、后来上网一查、才知道inline-block是有默认间距的、默认间距为4px、并且inline也是有默认间距、现在就来盘点一些解决inline-block元素和inline元素之间间距的一些方法

代码如下

div{
    width:900px;
}

div li{
    display:inline-block;
    width:300px;
}

<div>
<ul>
   <li></li>
　　<li></li>
　　<li></li>
</ul>

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉

2、设置margin-right为负值、但要考虑上下文的字体和文字大小

3、先设定子元素字体、再设置父元素font-size:0px;////chrome中：-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值、要考虑字体、子元素有文字也要注意设置letter-spacing或word-spacing的值

5、float:left;

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛