CSS之使用display:inline-block来布局

使用 `display: inline-block` 可以将元素设置为行内块级元素，可以实现类似于行内元素和块级元素的混合布局效果，并可以对其设置宽高、内边距、外边距等属性。

具体地，我们可以将需要进行布局的元素设置为 `display: inline-block`，然后通过 `vertical-align` 属性来控制元素的垂直对齐方式，再通过 `margin` 和 `padding` 属性来调整元素之间的间距。

例如，下面的代码可以实现两列等宽的布局效果：

<div class="container">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

.container {
  font-size: 0; /* 去除 inline-block 元素之间的空隙 */
}

.col {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  font-size: 16px;
}

这样，两个列就可以并排显示，并且等宽，同时也可以设置内边距和外边距等样式。不过需要注意，使用 `inline-block` 布局时，需要处理好元素之间的空隙问题，一种方法是将父元素的字体大小设置为 0，另一种方法是将元素之间的空隙注释掉。