行内元素默认不支持宽高，display: inline 会强化该限制；display: block 使元素独占一行并撑满父宽；inline-block 是水平排列且需设宽高的高频解法；现代布局优先考虑 flex 或 grid 上下文。
行内元素默认不支持宽高，display: inline 会强化这个限制
浏览器对 <span></span>、<a></a>、<strong></strong> 这类原生行内元素有默认渲染规则：忽略 width、height、margin-top 和 margin-bottom。设成 display: inline 不会改变这一点，反而可能覆盖你原本想用的其他显示模式（比如从 inline-block 强制切回纯行内）。实际开发中，除非你明确要“退化”为传统行内行为（比如清除浮动影响或重置组件样式），否则很少主动写 display: inline。
display: block 让元素独占一行并撑满父容器宽度
这是最常被误用的点：很多人以为 display: block 只是“让它变块”，其实它同时带来三个关键行为：换行、宽度自动填满父容器、支持全部盒模型属性。比如把一个 <span></span> 设为 display: block，它立刻变成类似 <div> 的表现——即使没写 <code>width: 100%，它也会默认占满整行。
- 常见错误：给
display: block元素加float或position: absolute后还指望它保持文档流内的块级布局 —— 实际上脱离文档流后，display值对布局影响已大幅减弱 - 兼容性注意：IE6/7 对
display: block在表单控件（如<input>）上的表现有 bug，需配合zoom: 1触发 hasLayout
别只盯着 inline 和 block，inline-block 才是日常高频解法
真正卡住人的往往不是“该用 inline 还是 block”，而是“怎么让几个元素水平排列又各自能设宽高”。这时候硬用 display: inline 会导致宽高失效，硬用 display: block 又强制换行。正确答案通常是 display: inline-block：
.item {
display: inline-block;
width: 120px;
height: 80px;
margin: 5px;
}
但要注意两个坑：元素间的空格会被渲染成 4px 左右空白（解决方法：父容器设 font-size: 0，子元素再重设字体大小）；垂直对齐默认是 baseline，常导致底部不对齐（加 vertical-align: top 更稳妥）。
立即学习“前端免费学习笔记（深入）”；
现代布局下，display 值的选择逻辑变了
现在写 CSS，优先考虑的是布局上下文，而不是单个元素的显示类型。比如：
- 想水平排列多个等宽项？直接用
display: flex父容器，子项不用管inline或block - 需要网格布局？
display: grid下所有子项自动成为网格项，display值几乎不影响其行列位置 - 仍用 float 清除？那
display: block是基础，但更推荐用overflow: hidden或::after伪元素清除
换句话说，inline 和 block 是底层机制，但日常开发里，它们更多是“被父容器决定”的结果，而不是你第一个要写的声明。
