什么时候使用inline-block?
在css中，display常用的值为inline-block这是最经典的值，我们中的许多人都能凭直觉做到这一点。但是，需要指出一点，它实际上有什么用？何时选择它而不是其他可能类似的选择？
inline-block是什么？
Inline-block是元素display属性的一个值。display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。
- 块级元素（block elements），来源于CSS盒子模型。 块级元素包含
width、height、padding、border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。 - 行内元素（inline elements）排列方式是水平排列。
- 行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有block元素的
width、height、padding、border与margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列。
inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后，同样会水平排列。虽然他们实现的原理不同，但内部表现为块级元素，水平排列这种需求，浮动跟inline-block都适合实现。
按钮Button
听到的最常见的答案是：总是在按钮上使用它。我觉得这是有一定道理的，但它也有一点误解。这个因为对于那些看起来像按钮的元素（可以用<a>，<button>或也许制作<input>）可以内联放置，但是要有边距和填充。这是一个小小的误解部分：display: inline;元素仍然 可以具有margin和padding，并且其行为可能与您期望的一样。
棘手的部分是：
- 内联元素上的块方向空白被完全忽略
- 内联元素上的填充不会影响文本行的高度
因此，虽然按钮本身的样式几乎没有问题，但父元素和周围的文本可能并非如此。来看一个例子：
当使用嵌入式按钮开始换行时，情况会变得更糟：
不要忘了inline-flex和inline-grid
随着display价值观inline-flex和inline-grid，你会得到所有相同的良好行为，你会从inline-block，但是元件（常常按钮）可以从一个更强有力的直列布局系统中受益。
以带有图标的按钮为例，如下所示：
<a href="#" class="button>
<svg> ... </svg>
Text
</a>为了使文本和图标在中心完美对齐，很容易这样做：
.button svg {
vertical-align: middle;
}永远不会完全正确……
但这是一个简单的解决方法inline-flex：
.button {
display: inline-flex;
align-items: center;
}
使用inline-flex或inline-grid，可以在以内联方向进行布局的块内拥有Flexbox或网格布局系统的所有功能。