inline-block 列比其他列高 - CSS

介绍

当使用CSS的inline-block属性时, 如果这些块分别在不同的容器中，则会出现一些奇怪的显示问题。这通常会导致内部块比容器内的其他元素更高，尽管它们具有相同的高度。这可能会导致对齐问题，特别是当设计师创建网格布局时，通常会使用inline-block来排列列。

原因

这个问题的原因是因为inline-block元素的底部内边距(bottom padding)和边框(border)会被添加到元素的高度(height)中。而其他块元素只有内部高度(height)。这种行为使得使用inline-block元素时，容器可能会与包含块的高度不对齐。

解决方案

1. 父元素去除空格

可以在HTML源码中删除块之间的空格，从而使它们之间的空隙不显眼。这样初始布局就会更加平衡，具有更好的对齐性。

<div class="box-container">
  <div class="box"></div><div class="box"></div><div class="box"></div>
</div>

2. 使用vertical-align

inline-block元素的默认vertical-align属性是baseline。将其更改为top或bottom，即可消除这种行为。

.box {
  display: inline-block;
  vertical-align: top;
}

3. 使用Flexbox布局

Flexbox布局是最好的选择，它让网格布局更加简洁、直观，并且可以快速地控制布局。

.box-container {
  display: flex;
  justify-content: space-between;
}

结论

到目前为止，这是解决这个问题的最佳方式。而且，无论何时使用Flexbox，都可以避免使用inline-block出现的问题。在任何情况下，当您需要创建列时，请始终使用Flexbox。