块级元素默认独占一行、可设宽高和上下边距，行内元素默认同行排列、宽高及上下margin无效；根本原因在于浏览器对默认应用display: block，而默认为display: inline，盒模型渲染规则由此决定。
块级元素默认独占一行，能设宽高和上下边距；行内元素默认挤在同一行，设 width、height、margin-top、margin-bottom 无效。
为什么 <p></p> 和 <span></span> 行为完全不同
浏览器对 <p></p> 默认应用 display: block，所以它强制换行、撑满父容器宽度、接受所有盒模型属性；而 <span></span> 默认是 display: inline，只响应左右 margin 和 padding，上下值被忽略——哪怕你写了也不会渲染出来。
常见误操作：
- 给
<a></a>设height想让点击区域变高 → 无效，得加display: inline-block或display: block - 把多个
<div> 放同一行想并排 → 它们会自动换行堆叠，需用 <code>display: inline-block或flex容器控制 - 在
<span></span>里塞<div> → HTML 结构非法，解析器可能自动闭合或报错 <h3> <code><img>和<input>为什么能设宽高却算行内元素它们属于“替换元素（replaced elements）”，浏览器内部用外部资源（如图像、表单控件）渲染，所以虽然默认
display: inline，但宽高、上下边距实际生效。这不是特例，而是规范允许的例外行为。注意点：
- 不要依赖这种“看似能设宽高”的表现来判断元素类型，仍要按语义和默认
display值理解 -
<img>的vertical-align默认是baseline，常导致底部留白，这是行内布局的典型副作用 - 若需完全可控的尺寸和定位，显式写
display: block或display: inline-block更稳妥
用
display切换类型时最容易忽略的兼容性细节display: inline-block在 IE8+ 完全支持，但 IE7 及更早版本不识别，需用display: inline; zoom: 1触发 hasLayout 兼容。现代项目虽基本不用考虑，但老系统维护中仍可能踩坑。其他关键差异：
-
display: block后，原本行内的<a></a>或<span></span>突然换行，可能破坏文本流布局 -
display: inline作用于<div> 后，它失去撑开高度的能力，若子元素浮动或绝对定位，父容器可能塌陷 <li> <code>display: inline-flex或display: inline-grid是新标准，部分旧 Android WebView 不支持，需检查目标环境
真正难的不是记住哪些是块、哪些是行内，而是理解浏览器如何根据
display值计算盒模型、决定换行逻辑、处理嵌套限制——这些细节在调试布局错位或点击区域异常时，往往才是根源。 - 不要依赖这种“看似能设宽高”的表现来判断元素类型，仍要按语义和默认
