inline-block卡片错位是因换行符/空格被渲染为约4px间隙，解决法有父容器font-size:0、删空白或改用flex；flex布局更可靠，支持gap、自动换行及响应式，IE11需兼容写法。
为什么 inline-block 卡片容易错位
卡片用 display: inline-block 排列时，元素间的换行符或空格会被渲染成约 4px 的空白间隙，导致卡片无法等宽填满容器。这不是 bug，是 HTML 文本节点的正常行为。
常见错误现象：width: 33.333% 的三列卡片在一行放不下，最后一张掉到下一行；或者左右边距不一致。
- 解决方法：对父容器设
font-size: 0，子卡片重置font-size（如font-size: 14px） - 或移除 HTML 中卡片标签之间的所有空白字符（不现实，可读性差）
- 或用注释
<!-- -->消除间隙（维护成本高）
用 flex 实现响应式卡片布局更可靠
flex 是现代 CSS 布局首选，天然规避空白间隙问题，且支持自动换行、对齐、间距控制等。
基础写法：
立即学习“前端免费学习笔记（深入）”；
.card-container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 推荐用 gap，比 margin 更干净 */
}
<p>.card {
flex: 1 1 calc(33.333% - 16px); /<em> 三列，减去 gap 占用 </em>/
min-width: 280px; /<em> 防止过小屏幕挤成一列太窄 </em>/
}-
gap在 Flex 容器中兼容性已很好（Chrome 84+/Firefox 63+/Safari 14.1+），IE 不支持，需降级用margin+:not(:last-child) - 避免用
flex: 0 0 33.333%，它不响应容器缩放；flex: 1 1 ...允许弹性收缩 - 移动端建议加
min-width配合flex-wrap，让卡片在小屏自然转为两列或一列
卡片内容高度不一致时怎么对齐
默认 flex-start 对齐会让卡片顶部对齐，但底部参差不齐，视觉割裂感强。
- 加
align-items: stretch（Flex 默认值），但前提是卡片内容高度不设死 —— 这样所有卡片会等高 - 若内容高度差异大且必须保留原始高度，改用
align-items: flex-start+ 统一min-height（如min-height: 200px） - 慎用
height: 100%，它依赖父容器显式高度，Flex 容器通常没有固定高
IE11 下 flex 卡片的兼容性补救
IE11 支持老版 Flex 语法（display: -ms-flexbox），但 gap 完全不支持，flex-wrap 行为也有差异。
- 必须写双语法：
display: -ms-flexbox; display: flex; - 用
margin模拟gap：给卡片加margin-right和margin-bottom，再用:nth-child(n)清除每行末尾的margin-right -
flex: 1 1 33.333%在 IE11 可能计算异常，建议改用-ms-flex: 1 1 33.333%
真正麻烦的不是写法，而是 IE11 下 min-width + flex-wrap 的组合经常失效 —— 最稳妥的做法是单独写媒体查询，小屏下强制 flex-direction: column。
