间隙产生的原因是`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. JQ获取当前根目录

    function getRootPath_web() {            //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp  ...

  2. iintellij IDEA运行环境使用教程

    1.官网:https://www.jetbrains.com 链接: https://pan.baidu.com/s/10QKLn1bGEW9W0pXEp6WR1A 提取码: vt2b 看官觉得有用留 ...

  3. 自动发现项目中的url

    def check_url_exclude(url): """ 判断url是否需要自动被发现,如果不是则移除 :param url: 自动发现的url :return: ...

  4. spring-第十三篇之零配置支持

    1.搜索bean类,使用注解标注spring bean. @Component:标注一个普通的spring bean类 @Controller:标注一个控制器组件类(Java EE组件) @Servi ...

  5. Codeforces 433A (背包)

    题面 传送门 真是令人胃疼的题面 我不管,我要把苹果都给雪菜!(滑稽)(冬马党不要打我) 分析 突然感觉这题跟今年NOIP Day1T2有点像,都是根据数加减来构造背包,只不过这题是01背包而不是完全 ...

  6. python开发之路-day01

    1.Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为A ...

  7. JS 函数 学习笔记

    函数是一段可以反复调用的代码块.函数还能接受输入的参数,不同的参数会返回不同的值 声明函数的 5 种方式 具名函数 (function 命令) function f(x, y){ return x + ...

  8. 安装weblogic界面安装

    如果中间有任何问题请联系作者:291562721 界面安装weblogic首先 需要工具: 链接:https://pan.baidu.com/s/1x3uYxsnycjT2Xi2TOTbDdQ 提取码 ...

  9. OkHttp源码剥离导入到eclipse中

    1.里面有两个类关于Android版本的我稍微修改过了,没有用的. 2.可以直接导入eclipse中,maven里面的jar包可能还有不需要的冗余,可以自己去剔除. https://github.co ...

  10. 左上角小猫猫直达博主GitHub \-_-/

    GitHub上有博主代码工程学习笔记啥的,由于推送比较方便所以有些学习笔记就没有上传到博客园