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，另一种方法是将元素之间的空隙注释掉。

相关问题

css里的display:inline-block

display:inline-block是一种CSS属性，它允许元素在一行内显示，并保留块级元素的特性。具体来说，该属性会将元素视为内联元素，但又具有块级元素的属性，例如可以设置宽度、高度、内外边距等。

使用display:inline-block可以使元素在一行内显示，而不会像display:block一样占据整行。同时，还可以设置元素的宽度、高度、内外边距等属性，使其具有块级元素的表现形式。通常用于创建水平菜单、图文混排等场景。

需要注意的是，display:inline-block会在元素之间留下空格，这些空格也会被显示出来。可以通过在父元素中设置font-size:0和在子元素中设置font-size:16px（或其他合适的字体大小）来解决这个问题。

display: inline-block; 高度超出向下

当使用`display: inline-block;`时，元素会以块级元素的方式显示，但是仍然保留了行内元素的特性。这意味着，元素会在同一行内显示，并且可以设置宽度、高度、内边距和外边距等属性。

当设置了`display: inline-block;`的元素的高度超出了其容器的高度时，会出现向下溢出的情况。这是因为行内块元素默认是按照基线对齐的，而不是顶部对齐。所以，如果元素的高度超出了容器的高度，它会向下溢出。

解决这个问题的方法有两种：

1. 设置`vertical-align: top;`：通过将元素的垂直对齐方式设置为顶部对齐，可以使元素的内容从顶部开始显示，而不是基线对齐。例如：

.container {
  height: 200px;
}

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

2. 使用`overflow: hidden;`：通过设置容器元素的`overflow`属性为`hidden`，可以隐藏超出容器高度的部分。例如：

.container {
  height: 200px;
  overflow: hidden;
}

.element {
  display: inline-block;
}

以上两种方法都可以解决`display: inline-block;`元素高度超出向下的问题。