去除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. 添加注释
  • Item content
  • Item content
  • Item content
  1. margin
.inline-block-list li {
  margin-left: -4px;
}
  1. 下移关闭标签
  • Item content
  • Item content
  • Item content

参考链接

你可能感兴趣的:(去除inline-block造成的元素之间的空白)