浅谈inline-block及解决空白间距

当使用CSS布局时，我们经常使用display属性来控制元素的布局。其中一个display属性值是inline-block。那么什么是inline-block呢？在本篇攻略中，我们将探讨这个属性，并回答解决这个属性可能引发的空白间距问题的方法。

什么是inline-block？

inline-block是CSS中的一个布局属性，它的作用是将元素设置为内联块级元素。简单来说，通过设置inline-block属性，我们可以把一个元素转变成块状元素和行内元素的结合体。它的表现行为效果就是：元素呈现为内联元素的特性，且会为元素分配一个块级框，同时可以设置元素的宽度、高度和边距等样式属性。

举个例子，我们经常使用div元素来布局，一般情况下它的display属性默认为block，而block元素会占满整个父容器。但是如果我们将div设置为inline-block，则它将不再占据整个父容器，而是将自身宽高和内部元素的宽高相匹配，同时让其余元素在同一行内显示。

inline-block的空白间距问题

虽然inline-block具有很好的布局性质，但有时候它会产生一个讨厌的问题，即空白间距。这个问题的产生原因在于HTML中不同行的元素之间存在换行符和空格字符等空白字符。这些空白字符在行内元素间会被认为是空格符，导致产生空白间距。

因此，为了解决inline-block的空白间距问题，我们可以采用以下两种方法：

方法一：结合使用font-size和letter-spacing属性

这种方法主要是通过设置font-size和letter-spacing属性的值来达到消除inline-block元素之间的空白间距的效果。具体实现方法如下：

.parent {
    font-size: 0;
    letter-spacing: -1px;
}
.child {
    display: inline-block;
    font-size: 16px;
    letter-spacing: normal;
}

其中，将父元素的font-size设置为0，是为了让父元素中的空白字符不占据任何宽度。而letter-spacing: -1px则是为了消除inline-block元素间的空白间距。此时，我们需要手动设置子元素的字号和letter-spacing。具体来说，将子元素的font-size设置成一个非零值，通常为实际字体大小，然后将子元素的letter-spacing设置回正常状态。

方法二：结合使用margin属性和文档结构

这种方法是通过设置浮动和margin的值来消除inline-block元素之间的空白间距的。具体实现方法如下：

.parent {
    font-size: 0;
}
.child {
    display: inline-block;
    float: left;
    margin-right: -4px;
}

这种方法需要将子元素设置为浮动元素，并将右侧的margin值设为负数来消除间距。另外，为了消除子元素的一些意外的影响（例如父元素无法容纳子元素超出父元素的情况），我们需要将父元素的font-size设置为0。

总结

inline-block 是布局中一种常用的属性，有利于制作页面结构更加美观和简洁。但是，它可能导致元素之间产生空白间距。因此，我们介绍了两种解决方法：一是通过设置font-size和letter-spacing属性的值，二是通过给子元素设置浮动和margin的值。这两种方法都可以有效地避免inline-block元素间的空白间距。