inline-block 布局
inline-block 横向排列、空白间隙处理、vertical-align 对齐
inline-block 布局
display: inline-block 让元素横向排列——比 float 简单，但有空白间隙问题。
学完本章你将： 掌握 inline-block 布局、空白间隙处理、vertical-align。
基本用法
css
.item {
display: inline-block;
width: 200px;
height: 100px;
background: #4CAF50;
}空白间隙问题
html
<!-- 元素间的换行/空格会产生间隙 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- 每个之间有 ~4px 间隙 -->解决方案
css
/* 方案1：父元素 font-size: 0（子元素重新设置） */
.parent { font-size: 0; }
.item { font-size: 16px; }
/* 方案2：HTML 标签紧贴（不换行） */
<div class="item">1</div><div class="item">2</div>
/* 方案3：用 Flexbox 替代（推荐） */
.parent { display: flex; }vertical-align 对齐
css
.item {
display: inline-block;
vertical-align: top; /* 顶部对齐 */
/* vertical-align: middle; 中间对齐 */
/* vertical-align: bottom; 底部对齐（默认 baseline） */
}