间隙产生的原因是`inline-block`对外是`inline`，对内是`block`。`inline`会将连续的空白符解析为一个空格（如：下面示例的两个`li`之间的后面的换行空格）。取消间隙的方法如下：

```html

Document

ul:last-child{
font-size: 0px;
}
li{
border: 1px solid #999;
padding: 2px;
min-width: 16px;
display: inline-block;
font-size: 14px;
line-height: 16px;
text-align: center;
}

有间隙

  • 首页
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 尾页

无间隙：删除空格

  • 首页
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 尾页

无间隙：父元素font-size: 0px;

  • 首页
  • 上一页
  • 1
  • 2
  • 3
  • 下一页
  • 尾页

```

CSS-inline-block 间隙的更多相关文章

  1. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  2. DIV CSS display(block,inline,none)的属性教程

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  3. css display block 和 inline

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  4. css(二) block，inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  5. css - inline\inline-block\block

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML/CSS：block，inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  7. CSS中block，inline和block-inline的区别（转载）

    http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level e ...

  8. CSS 去掉inline-block间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

  9. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  10. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

随机推荐

  1. JS验证数字

    //1.验证数字 var reg = new RegExp("^[0-9]*$"); //var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+ ...

  2. [LuoguP1829]Crash的文明表格(二次扫描与换根+第二类斯特林数)

    Solution: ​ 由于 \[ x^m = \sum_{i=0}^m{~m~\choose i}{~x~\brace i}i! \] ​ 将所求的式子化成这样,挖掘其性质,考虑是否能从儿子转移(或 ...

  3. 转义BABEL的POLYFILL和RUNTIME的区别

    babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps.Proxy.Refl ...

  4. [Codeforces 316E3]Summer Homework(线段树+斐波那契数列)

    [Codeforces 316E3]Summer Homework(线段树+斐波那契数列) 顺便安利一下这个博客,给了我很大启发(https://gaisaiyuno.github.io/) 题面 有 ...

  5. 小Z的袜子(题解)(莫队)

    小Z的袜子(题解)(莫队) Junlier良心莫队 题目 luoguP1494 [国家集训队]小Z的袜子 code #include<bits/stdc++.h> #define lst ...

  6. P4542 [ZJOI2011]营救皮卡丘（Floyd+网络流）

    P4542 [ZJOI2011]营救皮卡丘 乍一看似乎没啥题相似的 仔细一看,$N<=150$ 边又是双向边,似乎可以用Floyd搞   先跑一遍Floyd处理出$dis[i][j]$ 注意到走 ...

  7. Java 8实战之读书笔记四：高效Java 8编程

    三.高效Java 8编程 第8章 重构.测试和调试 Java 8的新特性也可以帮助提升代码的可读性:      使用Java 8,你可以减少冗长的代码,让代码更易于理解      通过方法引用和S ...

  8. 微信小程序（8）--头部导航滑动

    项目需求:实现头部导航,可左右滑动. <view class="top-news"> <view class="self-box"> & ...

  9. vue,一路走来（6）--微信支付

    微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...

  10. python断言语句assert

    断言语句的格式 assert test, [msg] test是一个表达式,表达式求值为Fals时引发AssertionError异常,msg是可选的异常消息. def test_assert(a): ...