间隙产生的原因是`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. 图解Http阅读笔记（一）

    1.网络基础 TCP/IP 1.1TCP /IP 协议族   计算机与网络设备要相互通信,双方就必须基于相同的方法.比如,如何探测到通信目标.由哪一边先发起通信.使用哪种语言进行通信.怎样结束通信等规 ...

  2. JVM（14）之 类加载机制

    开发十年,就只剩下这套架构体系了! >>>   从本篇博文开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要 ...

  3. 为什么需要在 React 类组件中为事件处理程序绑定this?

    https://juejin.im/post/5afa6e2f6fb9a07aa2137f51 事件绑定作为回调函数参数传递给函数,丢失其上下文,执行的是默认绑定,不是隐式绑定 类声明和类表达式的主体 ...

  4. react native 之 Android studio

    https\://services.gradle.org/distributions/gradle-4.4-all.zip 下载失败 https://blog.csdn.net/u013132758/ ...

  5. django 常用 import

    from django.shortcuts import HttpResponse, render, redirect def yimi(request): #直接返回页面内容 return Http ...

  6. Error- Overloaded method value createDirectStream in error Spark Streaming打包报错

    直接上代码 StreamingExamples.setStreamingLogLevels() val Array(brokers, topics) = args // Create context ...

  7. IDA Pro - 如何得到比较清楚的逆向伪代码

    原文地址:Question about disassembler 简介 这篇文章介绍了如何在不使用插件的IDA Hex-Rays如何得到比较清晰的伪代码.IDA Hex-Rays功能很强大,只要你提供 ...

  8. 八、请求post、get、jsonp

    1.创建个 news 组件使用 2.在module.ts 引入模块 3.在使用的“Component”中不一样.这里是 http和jsonp 4.编写get请求查看效果 (1).编写好的get请求,点 ...

  9. Go 迭代切片

    迭代切片有两种方式: 1. 使用 for range 迭代切片   // 其长度和容量都是 4 个元素 slice := [], , , } // 迭代每一个元素,并显示其值 for index, v ...

  10. javascript数组赋值操作的坑

    描述:数组对象赋值,即arr1=[{},{},{}]这种数据结构的对象赋值,将arr1赋值给arr2:然后删除arr2里的元素 一.最常用的= arr2 = arr1; detect(val) { l ...