块级元素独占一行，行内块元素并排显示；前者margin-top/bottom影响相邻块，后者仅在盒内生效且受基线对齐影响；行内块间空隙由font-size决定，可用flex或font-size:0解决。
块级元素默认独占一行，行内块元素默认并排显示
这是最直观的布局差异。块级元素如 div、p 渲染时自动换行，前后强制断行；而行内块元素如 img、input、button 会像文字一样水平排列，多个并列时挤在同一行，直到空间不足才折行。
常见误判点：有人以为 display: inline-block 只是“加了宽高的行内元素”，其实它还继承了行内元素的基线对齐（baseline）行为，默认按文本底部对齐，容易导致下方留白——这不是 margin 或 padding，而是行内上下文的自然间隙。
两者都支持 width/height/margin/padding，但 margin-top/bottom 对布局影响不同
表面上看，width、height、padding、margin 在块级和行内块上都能生效，但 margin-top 和 margin-bottom 的实际作用范围有本质区别：
- 块级元素的
margin-top/margin-bottom会真实推远相邻块（比如上一个div或父容器边界） - 行内块元素的
margin-top/margin-bottom虽然能设，但不会撑开行高（line-height），也不会影响邻近行内块的垂直位置——它只在自身盒模型内起作用，且可能被基线对齐逻辑“吞掉”一部分视觉效果
验证方式：给两个并排的 span（设 display: inline-block）分别加 margin-top: 20px，你会发现它们整体没上移，只是内部上移，周围文本行高不变。
立即学习“前端免费学习笔记（深入）”；
父容器中内容溢出时，行内块会受 white-space 和 font-size 影响
行内块元素之间如果存在 HTML 换行或空格，浏览器会渲染为一个空格字符（U+0020），导致元素间出现约 4px 宽的间隙——这跟父容器的 font-size 直接相关（间隙 ≈ 当前 font-size × 0.25）。而块级元素完全不受此影响。
解决间隙的常用手段包括：
- 父元素设
font-size: 0，子元素再单独设字体大小 - 移除 HTML 中的换行与空格（不推荐维护）
- 用
float: left+ 清除浮动（已过时，仅兼容老项目） - 改用 Flex 布局替代（更现代、无此问题）
注意：vertical-align 对行内块有效，但对纯块级无效（除非它被设为 inline-block 或 table-cell 等）。
display: inline-block 是显式切换，不是元素固有类型
HTML 标签本身没有“行内块”这一原生分类，img 和 input 是浏览器 UA 样式表默认设为 display: inline-block 的结果。你完全可以把 div 设成 display: inline-block，也能把 span 设成 display: block。
关键提醒：一旦用 CSS 改变 display，该元素就脱离原始语义渲染规则。比如 button 默认是 inline-block，若强行设为 block，它仍可点击、提交，但可能破坏按钮组的水平对齐预期；反过来，把 h2 设为 inline-block，标题就不再独占一行，语义与视觉严重脱节。
真正容易被忽略的是：行内块的“行内性”始终存在——它参与行框（line box）构建，因此受 line-height、white-space、font-size、vertical-align 全方位制约，而块级元素只关心块格式化上下文（BFC）和父容器尺寸约束。
