display:inline

默认，此元素会被显示为内联元素，元素前后没有换行符

多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
inline元素设置width,height属性无效
inline元素的margin和padding属性

  • 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
  • 但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

行内元素

与 inline 相比，允许在元素上设置宽度和高度。且会保留上下外边距/内边距
与block相比，inline-block在元素之后不添加换行符，该元素可以位于其他元素旁边

display:block

此元素将显示为块级元素，此元素前后会带有换行符

元素会独占一行，默认情况下，block元素宽度自动填满其父元素宽度

基本示例

  1. span.a {
  2.   display: inline; /* span 的默认值 */
  3.   width: 100px;
  4.   height: 100px;
  5.   padding: 5px;
  6.   border: 1px solid blue; 
  7.   background-color: yellow; 
  8. }
  10. span.b {
  11.   display: inline-block;
  12.   width: 100px;
  13.   height: 100px;
  14.   padding: 5px;
  15.   border: 1px solid blue; 
  16.   background-color: yellow; 
  17. }
  19. span.c {
  20.   display: block;
  21.   width: 100px;
  22.   height: 100px;
  23.   padding: 5px;
  24.   border: 1px solid blue; 
  25.   background-color: yellow; 
  26. }


display:inline-block 产生的间隙

场景：横向排列布局，使用inline-block的特性实现，就会有这个问题：水平和垂直方向都会出现间隙

原因

先来了解这个属性值的含义，display: inline-block 会导致一个元素生成偏内联级别特性的块容器，这个元素的内部被格式化为块级盒子，元素本身被格式化为一个单独的内联级别盒子。也可以说这样的元素，既有块级元素的特性，又有内联元素的特性。一些教程里面翻译过来叫行内块元素，这个标准属性是在 CSS2.1 中才出现，但 ie 在很早的时候就实现了自己的 inline-block 。

从网上查询得知间隙是由空白符（white space）造成。那么在 CSS 里面什么是空白符？查询资料得知，在 CSS 语法中，在空白区域，只有空格(U+0020)、制表符(U+0009)、换行(U+000A)、回车(U+000D)、换页(U+000C)才会被视为语法的一部分，这些插入文档时，产生的就是空白符。

在资源里面换行的呈现，可能是一个回车符（U+000D），一个换行符(U+000A)，或者由回车符和换行符的组合，或者是其它的识别文档开始和结束的部分机制。CSS 属性 white-space 处理模型假定所有的换行已经被标准化为换行符。用户代理识别到换行后的呈现，必须要应用 CSS 属性 white-space:normal 处理规则。如果文档语言没有特定的换行规则，那么文档文本中的每个回车符和连续的回车换行符，都处理为一个换行符。默认的标准规则也会应用生成内容。空格和 Tab 也有对应处理规则，更加详细的可以参考这里

由以上就可以知道，在写 html 代码的时候，为了方便观看和维护，都用了适当的换行和空格，而这些字符，也将应用 CSS 属性 white-space 产生了内容，所以就产生了间隙。但上面的图片为什么在竖直方向上一个有间隙，一个没有间隙？都是相同的 html 结构，只是其中一个有文本，怎么就会这样子?

根据前面的介绍，了解到应用 display: inline-block 后，元素就会按照内联元素进行摆放，内联元素的对齐方式由属性 vertical-align 决定，那么是不是这个导致的呢？为了更加直观，在后面多余的区域加几个文字看看效果。
inline-block - 图1
这个就明显很多了，好像真的是对齐的缘故，vertical-align 默认的属性值是 baseline ，它的含义就是：一个盒子的基线与其父盒子的基线对齐，如果这个盒子没有基线，那么这个盒子的 margin 边界跟父元素的基线对齐。基线这个含义没有找到比较清晰明确的定义，就用《CSS权威指南》的一张图直观的感受一下。
inline-block - 图2
对于 inline-block 的情况，文档里面 baseline 的定义有相关的说明：inline-block 一类元素的 baseline 是其子元素在正常文档流中最后一个行框的 baseline ，如果它里面没有行框或者设置了 overflow 属性值为 visible 之外的属性，那么它的 baseline 就是它自己的底部外边距边界。
这样子就差不多可以理解了，然后对产生的原因做一个简短的总结：
由于写 html 代码的方式，文档里面产生了一些看不见的字符，CSS 的 white-space 属性会作用于这些字符，产生了内容，占据了空间，产生了水平方向上的“间隙”效果。由于都是字符，font-size 和 line-height 属性当然也是会生效的，由此产生了行框，只不过看不到。在文档流里面格式化时，由于 vertical-align 属性的作用，字符的基线跟 inline-block 元素的基线对齐，可能会出现垂直方向上有“间隙”的效果。

方法

从产生的原因，可以比较直接想到，从 white-space 、font-size 和 vertical-align 相关方面去入手

方法1：避免使用空格、换行、tab、换页

这种是很原始的方式，虽然有效，但不方便识别和维护。

诗
远方
xX参照文字

或者这样
诗
远方
xX参照文字

方法2：使用 letter-spacing

letter-spacing 属性指定字符之间的间距，默认值是 normal 。如果父元素下，还有其它不一致的内容，就需要注意。
.clear-fun2 { letter-spacing: -5px; } .clear-fun2 .inline-block-element { letter-spacing: 0; }

方法3：使用 word-spacing

word-spacing 属性指定单词之间的距离，默认值是 normal 。如果父元素下，还有其它不一致的内容，就需要注意。
.clear-fun3 { word-spacing: -5px; } .clear-fun3 .inline-block-element { word-spacing: 0; }
经过测试，移动端 Safari 没有问题，在 windows 版本 Safari-5.1.7（7534.57.2）中有问题，如下图。
inline-block - 图3

方法4：font-size:0

这种方法比较麻烦的是，其子元素要重新指定字体大小。
.clear-fun4 { font-size: 0; } .clear-fun4 .inline-block-element { font-size: 14px; }
查询的一些资料里面告知，某些浏览器上有问题。经过测试，移动端 Safari 没有问题，在 windows 版本 Safari-5.1.7（7534.57.2）中有问题，如下图。
inline-block - 图4

方法5：使用 margin 负值

发现在谷歌浏览器里面的值要比其他浏览器多一些，才能有效果，否则还是会看到间隙。看到别的文章中示例的方法，发现取值大小不太一样，不同的字体也会有影响。外部环境影响无法预测。
.clear-fun5 .inline-block-element { margin-right: -5px; }
以上所讲相关示例页面：关于 display: inline-block 产生的间隙示例

简单示例

  1. <style>
  2.     li{
  3.         display: inline-block;
  4.         border: 1px solid black;
  5.     }
  6. </style>
  8. <ul>
  9.     <li>这是1</li>
  10.     <li>这是1</li>
  11.     <li>这是1</li>
  12.     <li>这是1</li>
  13.     <li>这是1</li>
  14. </ul>

image.png
解决方案

  1. <style>
  2.     ul{
  3.       font-size:0;
  4.     }
  5.     li{
  6.         display: inline-block;
  7.         border: 1px solid black;
  8.         font-size:14px;
  9.     }
  10. </style>

相关文章
https://github.com/XXHolic/blog/issues/13

相关文章
https://www.w3school.com.cn/css/css_inline-block.asp

https://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/