间隙产生的原因是`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. Survey Results for Rebecca Murpheys Learning JavaScript Survey

    时间 2016-01-27 05:40:46  Raymond Camden's Blog 原文  http://www.raymondcamden.com/2016/01/25/survey-res ...

  2. echarts之折线图介绍及使用

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

  3. Linux系统配置Java开发基本环境

    jdk安装一.用yum安装jdk1.查看yum库都有哪些jdk版本yum search java|grep jdk2.选择版本安装yum install java-1.8.0-openjdk(/usr ...

  4. [Linux Test Project] [PATCH] Fix an bad variable name erro in runltp script

    [PATCH] Fix an bad variable name erro in runltp script (/opt/ltp/runltp) Hi All,   I got an error fo ...

  5. UVALive 6270 Edge Case（找规律，大数相加）

    版权声明:本文为博主原创文章,未经博主同意不得转载. vasttian https://blog.csdn.net/u012860063/article/details/36905379 转载请注明出 ...

  6. 最简单的神经网络-感知器-python实现

    import numpy as np import matplotlib.pyplot as plt X=np.array([[1,3,3], [1,4,3], [1,1,1]]) Y=np.arra ...

  7. fputc, fputs, putc, putchar, puts - 输出字符和字符串

    总览 (SYNOPSIS) #include <stdio.h> int fputc(int c, FILE *stream); int fputs(const char *s, FILE ...

  8. .bat 文件调用python脚本

    1.将clearlog.py 脚本放在指定目录 比如 我放在 C:\Users\Administrator\Desktop 上 也就是桌面上 2.创建一个.bat 位后缀名的脚本 3.写入如下脚本 @ ...

  9. WPF 几种常用控件样式的总结

    这里把wpf中几种常用样式总结一下,后期可以直接拷贝使用,呵呵 一.Button <ResourceDictionary xmlns="http://schemas.microsoft ...

  10. BZOJ3398 牡牛和牝牛

    隔板搞掉就行了 特么我什么时候感冒能好!QAQ.脑子都没有了QAQ. //Love and Freedom. #include<cstdio> #include<cstring> ...