什么时候使用inline-block?

在css中,display常用的值为inline-block这是最经典的值,我们中的许多人都能凭直觉做到这一点。但是,需要指出一点,它实际上有什么用?何时选择它而不是其他可能类似的选择?

inline-block是什么?

Inline-block是元素display属性的一个值。display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。

  • 块级元素(block elements),来源于CSS盒子模型。 块级元素包含widthheightpaddingbordermargin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
  • 行内元素(inline elements)排列方式是水平排列。
  • 行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的widthheightpaddingbordermargin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列。

inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后,同样会水平排列。虽然他们实现的原理不同,但内部表现为块级元素,水平排列这种需求,浮动跟inline-block都适合实现。

按钮Button

听到的最常见的答案是:总是在按钮上使用它。我觉得这是有一定道理的,但它也有一点误解。这个因为对于那些看起来像按钮的元素(可以用<a><button>或也许制作<input>)可以内联放置,但是要有边距和填充。这是一个小小的误解部分:display: inline;元素仍然 可以具有marginpadding,并且其行为可能与您期望的一样。

棘手的部分是:

  • 内联元素上的块方向空白被完全忽略
  • 内联元素上的填充不会影响文本行的高度

因此,虽然按钮本身的样式几乎没有问题,但父元素和周围的文本可能并非如此。来看一个例子

当使用嵌入式按钮开始换行时,情况会变得更糟:

不要忘了inline-flexinline-grid

随着display价值观inline-flexinline-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-flexinline-grid,可以在以内联方向进行布局的块内拥有Flexbox或网格布局系统的所有功能。