块级元素默认display:block，独占一行、可设宽高；内联元素默认display:inline，同行排列、宽高由内容决定；二者本质是浏览器对HTML标签的默认渲染逻辑。
块元素和内联元素不是“要不要用”的选择题，而是浏览器默认渲染逻辑的直接体现——理解它们的关键，在于观察元素在文档流中「怎么占位置」和「能塞什么内容」。
为什么 p 和 div 会换行，而 span 和 a 不会
浏览器对每个 HTML 标签预设了 display 值：p、div 默认是 display: block，天然强制前后换行；span、a 默认是 display: inline，只占内容所需宽度，多个并排挤在同一行里。
常见错误现象：
- 把
span当成容器套div或p，结果页面错乱或控制台报渲染警告 - 给
a设height或margin-top发现没反应——因为它是 inline，垂直方向盒模型属性被忽略
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的「Elements」面板选中任意元素，看右侧面板的 Computed 标签页，直接确认它的实际
display值 - 别靠记忆猜，默认行为以 HTML5 规范为准：块级元素可嵌套任意元素（包括其他块级），内联元素一般只接受文本或其他内联元素（
a是少数允许嵌套块级的例外）
img 和 input 看似内联却能设宽高，怎么回事
img 和 input 属于「替换元素（replaced element）」——它们的内容由外部资源（如图片文件、表单控件引擎）提供，浏览器为其预留了可尺寸化的渲染区域，所以虽是 display: inline，但 width/height 有效，vertical-align 也起作用。
容易踩的坑：
- 把
img放进纯文本段落里，发现底部有空白缝隙——那是 baseline 对齐导致的，加vertical-align: top/middle/bottom或设为display: block就消失 - 给
input设margin-bottom没效果？检查它是否被父容器的行高或对齐方式干扰，优先尝试display: block或flex布局来绕过 inline 限制
性能提示：替换元素加载失败时可能触发重排，img 建议始终声明 width 和 height 属性，避免布局抖动。
什么时候该用 display: inline-block
当你要一个元素「保持同行排列」但又「需要设置宽高/上下 margin/内部块级结构」时，display: inline-block 是最直接的解法。它融合了 inline 的流式特性 + block 的盒模型自由度。
典型使用场景：
- 水平导航菜单项（每个
li内含图标+文字，需统一高度和左右间距） - 响应式卡片网格中，不依赖 Flex/Grid 的降级方案
- 按钮内嵌图标和文字，且整体要居中对齐又不能独占一行
注意点：
-
inline-block元素之间存在空格（HTML 中的换行/缩进），会被渲染为 4px 左右间隙——解决方法：父容器设font-size: 0，子元素再重设字体大小；或移除模板中的空白符；或改用 Flex - 它仍属于「行内格式化上下文」，遇到父容器宽度不足时会换行，不像 Flex/Grid 那样有更可控的折行策略
真正卡住人的往往不是概念，而是看到 div 套 span 正常显示，就以为「嵌套没问题」，结果一加 CSS 或换浏览器就崩——块/内联的边界在 DOM 结构层就已固定，CSS 只是改变呈现，不改变语义约束。
