必须同时设置 vertical-align 和间隙处理方案，否则仅 display: inline-block 会导致 baseline 对齐错位和 html 换行符渲染出约 4px 空隙；推荐统一 vertical-align: top 并配合 font-size: 0 + 子元素重设字号或 flex+gap。

两个 <button></button> 默认是块级元素，天然独占一行；用 display: inline-block 是最直接、兼容 IE8+ 且行为可控的方案，但必须同步处理垂直对齐和空白间隙。

为什么不能只写 display: inline-block？

写了但按钮还是上下错位或中间有空隙？这是常见现象，不是代码写错了，而是 HTML 结构和 CSS 默认行为共同导致的：

• vertical-align 默认是 baseline，按钮文字基线对齐，高度不一致时就会“一高一低”
• HTML 换行符或空格会被渲染成约 4px 的空白间隙，两个按钮加起来宽度超容器就可能换行
• inline-block 元素仍受字体大小影响，父容器的 font-size 会间接控制这个间隙

inline-block 正确应用三步走

缺一不可，否则容易白忙活：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 给两个 <button></button> 都加上 display: inline-block
• 显式设置 vertical-align: top 或 vertical-align: middle（推荐 top，更稳定）
• 解决间隙：选一种——
  ▸ 把两个 <button></button> 标签写在同一行，中间不留空格或换行
  ▸ 或给父容器设 font-size: 0，再给按钮单独设 font-size

别踩这些坑

实际调试中最常卡住的地方：

• 只改一个按钮的 display，另一个没改 → 还是块级，强行占满一行
• 用了 display: inline → 按钮失去 width、height、padding 控制能力，样式基本失控
• 依赖 float: left → 父容器高度塌陷，背景/边框消失，还得额外清浮动
• 没设 box-sizing: border-box → padding 和 border 加到宽度外，容易意外溢出换行

真正麻烦的不是写法本身，而是默认行为太隐蔽：换行符算字符、基线对齐不直观、盒模型叠加没意识。动手前先看一眼浏览器开发者工具里元素的实际尺寸和对齐线，比反复试错快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！