在CSS中，inlineblock元素具有一定的特性，可以独立占据空间，并且能够撑起父元素的高度，很多开发者发现，在实际应用中，inline子元素并不能撑起inline父元素的高度，这究竟是为什么呢？

我们来了解一下inlineblock元素的基本特性，inlineblock元素会独占一行，类似于块级元素，但是在垂直方向上，它们的表现却有所不同，block元素会占据整个垂直空间，而inlineblock元素则只会占据其本身的高度，这意味着，如果父元素的高度没有设置值，那么inlineblock子元素也无法撑起父元素的高度。

如何让inline子元素撑起inlineblock父元素的高度呢？这里提供两种解决方案。

方案一：设置父元素的height值。

在这种情况下，我们需要为父元素设置一个height值，以便让inline子元素能够撑起父元素的高度。

.parent {
  display: inlineblock;
  height: 200px;
  backgroundcolor: lightblue;
}
.child {
  display: inline;
  backgroundcolor: red;
}

在这个例子中，我们为父元素设置了height值，使得子元素能够撑起父元素的高度。

方案二：使用flex布局。

如果父元素的高度不确定，或者需要根据内容动态调整，我们可以使用flex布局来实现。

.parent {
  display: flex;
  backgroundcolor: lightblue;
}
.child {
  backgroundcolor: red;
}

在flex布局中，父元素会根据其子元素的高度来撑起自身的高度，需要注意的是，这里我们没有为父元素设置height值，而是使用了display: flex属性，使得父元素能够根据子元素的高度自动调整。

要让inline子元素撑起inlineblock父元素的高度，可以通过设置父元素的height值或者使用flex布局来实现，在实际开发过程中，开发者可以根据项目需求和布局方式选择合适的方案，当然，还有其他布局方式可以实现这一目标，这里就不一一列举了。

需要注意的是，在实际应用中，inlineblock元素和inline子元素之间存在一定的空白，这可能会影响到页面的视觉效果，为了消除这个空白，我们可以为父元素设置fontsize: 0;或者使用letterspacing和wordspacing属性进行微调，具体做法如下：

.parent {
  fontsize: 0;
}
.child {
  fontsize: 16px;
  letterspacing: normal;
  wordspacing: normal;
}

或者

.parent {
  letterspacing: 4px;
  wordspacing: 4px;
}
.child {
  letterspacing: normal;
  wordspacing: normal;
}

通过以上方法，我们可以消除inlineblock元素和inline子元素之间的空白，让页面效果更加美观。