间隙产生的原因是`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实现图片轮滑效果

    经常在购物网站,看到那种图片轮滑的效果,所以看到有人实现了,所以我也就学习下了. 首先贴出html代码: <!DOCTYPE html> <html lang="en&qu ...

  2. canvas 画正方形和圆形

    绘制正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Git配置全局账号密码避免每次拉取、提交输入账号密码

    前言 在大家使用github的过程中,一定会碰到这样一种情况,就是每次要push 和pull时总是要输入github的账号和密码,这样不仅浪费了大量的时间且降低了工作效率.在此背景下,本文在网上找了两 ...

  4. Python中集合类型的使用

    集合类型 多个不重复元素的无序组合 集合类型的表示 建立非空集合的方式可以用{}来表示 采用set()来表示 集合类型的操作符 S|T 返回一个新集合,这个集合包含S与T中的所有元素. S-T 返回一 ...

  5. printcap - 打印机相容性数据库

    总览 SYNOPSIS printcap 描述 DESCRIPTION Printcap 是 termcap(5) 的簡單版, 用來描述 line printers. 當用到 spool 系統時, 一 ...

  6. Redis线上环境做Keys匹配操作！你可以离职了！

    转自:https://blog.csdn.net/bntx2jsqfehy7/article/details/84207884一.一个新闻 新闻内容如下:php工程师执行redis keys * 导致 ...

  7. try、catch、finally--try块里有return，finally还执行吗？

    finally块的作用是,保证无论出现什么情况,finally块里的代码一定会被执行. 由于程序执行return就意味着结束对当前函数的调用并跳出这个函数体,所以任何语句要执行都只能在return之前 ...

  8. Sass函数：random()函数

    random() 函数是用来获取一个随机数 >> random() 0.03886 >> random() 0.66527 >> random() 0.8125 & ...

  9. 2、pycharm中设置pytest为默认运行

    1.打开File-setting 2.打开Tools-Python Integrated Tools 3.找到Default test runner选项,在下拉框中选择py.test 4.点Apply ...

  10. 为什么我们从Angular 2迁移到Vue.js（为什么我们没有选择React）

    在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本.经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定.8个月前,我们的前端在使 ...