去除inline-block造成的元素之间的空白

对多个元素使用inline-block会在元素之间填充空白文本,在显示上就是两个元素之间有间隙。
有的时候一行有两个元素当对这两个元素使用inline-block同时设置width: 50%,会出现折行,此时就是空白造成的,解决空白的几种方法:

  1. 在父元素上设置font-size: 0
.inline-block-list { /* ul or ol with this class */
  font-size: 0;
}
.inline-block-list li {
  font-size: 14px; /* put the font-size back */
}
  1. 添加注释
<ul>
  <li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>
  1. margin
.inline-block-list li {
  margin-left: -4px;
}
  1. 下移关闭标签
<ul>
   <li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>

参考链接

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,536评论 1 91
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 427评论 0 3
  • 乌龟先生,我好久没哭了!好久好久了。。。从我努力走近艳姐,想与她冰释前嫌,她却冷漠以对。走出地铁那瞬间,我哭了...
    阿紫0707阅读 92评论 0 0
  • 感赏有人能够如此的相信我,这是对我人品的肯定,我想只要我真心对人别人也会随人感动。 感赏我又反复听了英师姐的课,领...
    张元玲阅读 80评论 0 0
  • 之前的文章我们谈到,没有什么方法可以完全避免孩子在入园适应过程中的焦虑和情绪爆发,但这并不意味着父母就没有办法为孩...
    出门遛弯儿的喜羊羊阅读 68评论 0 0
  • 1感恩银行的工作人员一早通知我她们有节日活动,让我意外收到礼物。 谢谢,谢谢,谢谢! 2感恩我的客户一早就发来了祝...
    涵妈雅妈阅读 90评论 0 0