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