核心区别在于默认渲染行为：行内元素不换行、宽高无效、垂直margin无效；块级元素独占一行、可设宽高及全部边距。
行内元素和块级元素的核心区别不在“语义”，而在默认渲染行为——浏览器怎么画盒子、怎么分配空间、怎么响应CSS设置。 你改不改 display，都不影响HTML规范里它原本属于哪一类；但只要改了 display，它在页面上就按新规则走。
为什么 width 和 margin-top 对 <span> 无效？
因为 <span> 是默认 display: inline 的元素。行内元素的盒模型只响应水平方向的 margin 和 padding，垂直方向的 margin 被忽略，width/height 完全不参与布局计算。
- 哪怕你写
span { width: 200px; height: 50px; margin-top: 30px; }，浏览器也当没看见 -
padding-top和padding-bottom虽然能生效（视觉上撑开背景），但不会推挤相邻行内元素——它们不参与行高计算 - 真正起作用的是
line-height或父容器的font-size，这些才决定行内元素的垂直空间
什么时候必须用 display: inline-block？
当你需要一个元素既保持横向排列（不换行），又能独立控制尺寸和边距时，display: inline-block 是最直接解法。比如按钮组、图标+文字组合、导航菜单项。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<img>和<input>天然是inline-block，所以能设宽高又不独占一行 - 用
display: inline-block替代浮动或绝对定位做简单并排，避免清除浮动或脱离文档流的问题 - 注意：
inline-block元素之间有天然空格（来自HTML中的换行/缩进），可用font-size: 0或注释消除，但别忘了子元素重设font-size
display: block 和 display: inline 转换后，嵌套规则还管用吗？
不管用。CSS 的 display 只改渲染行为，不改 HTML 内容模型约束。即使你把 <span> 设成 display: block，它依然不能合法包含 <div> —— 浏览器可能渲染出来，但 HTML 验证会报错，语义和可访问性也会受损。
立即学习“前端免费学习笔记（深入）”；
-
<a>是特例：规范允许它包裹块级元素（如<div>），但仅限于 HTML5，并非所有场景都安全（比如表单内或某些 ARIA 场景） - 想让行内元素“看起来像块”又保持语义正确？优先考虑用语义化块级标签（如
<section>、<article>）替代硬转display - 真要动态切换布局？用
display: contents或 Flex/Grid 容器更可控，而不是靠强行改变元素类型
最容易被忽略的一点：display 值不是非黑即白的开关。比如 inline-flex 和 inline-grid 也是“行内级容器”，但它们内部子元素的行为完全由 flex/grid 规则控制——这时候你得同时盯住两层 display 逻辑。
