正在加载...

CSS inline-block

上一课梳理了日常的 display 取值。这一课深入练习混合体：inline-block。有空间时希望邻居留在同一行——像文本——同时又要真正的盒子，认真对待 width、height 和 padding。这就是它的工作。

并排对比

📊 inline 对比 inline-block 对比 block

模式 行内行为 Width / height / padding
inline 坐在文本行里 通常忽略 width/height；padding 可能看起来怪
inline-block 有空间时留在行内 width、height、padding 像盒子一样生效
block 从自己的行开始 完整盒模型；常常占满行宽

当元素要与兄弟共享一行，又需要可测量尺寸时——标签芯片、标记、图标文案、紧凑工具栏按钮——选 inline-block。整页分栏和复杂对齐留给后面的 Flexbox 与 Grid。

有尺寸却仍共享行的芯片

与纯 inline 不同，芯片可以保留 padding 和固定宽度，同时坐在其他芯片旁边。

有尺寸的芯片

css 
.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}

简单工具栏行

几个等宽控件可以坐在同一行。用 margin 隔开。在 Flexbox 到来前，这对平静的工具栏已经够用。

inline-block 工具栏

css 
.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}

行内垂直对齐

行内级盒子挨着文字或图片时高度可能不同。vertical-align 微调它们——图标+文案对常用平静的 middle。

与文字对齐

css 
.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}

.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}

空白空隙陷阱

浏览器把标签之间的空格和换行当成文本节点。两个 inline-block 兄弟之间，那点小空格会变成可见空隙。这不是 Flexbox 的 gap——是残留的 HTML 空白。

看见空隙

css 
/* HTML 像：
<span class="tile">A</span>
<span class="tile">B</span>
会因换行留下空隙。 */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}

缓和空隙的办法：标签写在同一行且无空格，注释掉换行，或谨慎使用很小的负 margin。之后 Flexbox 给更干净的间距——别永远用 inline-block 硬撑每一行。

平静的 inline-block 习惯

行项目用共享类。有意设定尺寸。只有空隙碍事时再处理空白。别用嵌套 inline-block 重建整页布局——那会回到 float 时代的痛苦。position 与 float 有各自的课。

共享项目类

css 
.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}

自己试试

  1. 做三个带 inline-block、固定宽度和 padding 的 .chip——看它们共享一行。
  2. 做四个等宽 .tool 按钮工具栏，带 margin-right。
  3. 把小 .icon 放在 .label 旁，试 vertical-align: middle。
  4. 两个 .tile 兄弟先分行 HTML，再写在一行——比较空隙。
  5. 写一句话：何时 inline-block 够用，何时等 Flexbox？

常见错误

  • 指望纯 inline 像真盒子一样听从 width / height
  • 把其实是标签间 HTML 空白的「神秘空隙」怪到 CSS 头上
  • 用 inline-block 发明整页多栏布局
  • 把本课当成上一课那种粗览 display（block / none）
  • 还没掌握混合体就跳到 position 或 float 配方

小结

  • inline-block 像文本坐在行内，却为尺寸与 padding 保留真盒模型
  • 适合芯片、紧凑工具栏和图标+文案对
  • vertical-align 帮助对齐不同高度的邻居
  • 标签间空白可能造成可见空隙——要知道原因
  • 复杂行与干净空隙以后靠 Flexbox；让 inline-block 保持有意为之

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 36 的 36
Css 教程