HTML文档流：块级与行内标签的区别详解

块级元素与行内元素深度解析：HTML文档流中的布局逻辑与核心区别

块级元素在HTML文档流中独占一行，自动撑满父容器宽度并触发BFC，支持完整的盒模型属性；而行内元素不会换行，宽高完全由内容决定，仅有左右方向的margin生效，且通常不能嵌套块级元素（a标签属于例外情况）。值得一提的是，input和img的display默认值为inline-block，同时具备两种元素的特性，但也带来了常见的4px间隙问题。

首先澄清一个常见的认知误区：块级标签与行内标签在HTML文档流中的行为差异，远不止“能否换行”这一表面特征。背后实际上涉及浏览器如何计算布局空间、如何响应CSS样式规则、以及元素之间如何嵌套等深层机制。

块级元素详解：独占一行并默认撑满父容器宽度

块级元素（如 div、p、h1）在渲染时会自动触发块格式化上下文（BFC），这直接导致前后元素被强制换行。它们的 width 默认值为 auto，实际计算后等于父容器内容区宽度，再减去左右两侧的 margin、padding 和 border。也就是说，块级元素天生具备“占满整行”的特性。

• margin-top 和 margin-bottom 会切实影响垂直间距，但需注意外边距合并（margin collapse）现象——两个相邻块级元素的垂直外边距会取较大值而非简单相加
• 可以嵌套任意块级或行内元素——但需注意，像 p、h1 这类文本类块级元素不能直接包含 div
• 设置 height 属性是有效的；若内容超出容器范围，则按 overflow 规则处理

行内元素详解：不换行且宽高完全由内容决定

行内元素（如 span、a、strong）不会打断当前的行框（line box），其尺寸完全由字体度量、字符宽度和行高共同决定。换句话说，在CSS中为它们设置 width 或 height 会被直接忽略，margin-top 和 margin-bottom 也不会产生任何位移效果。

• 仅有 margin-left 和 margin-right 是有效的，padding 的上下部分虽然会“撑开”行高，但不会改变元素自身的高度
• 不能直接包含块级元素——不过 a 属于例外情况，HTML5允许其包裹块级内容，但在语义使用上需要谨慎
• 多个相邻行内元素之间的空白符（包括空格、换行）会被浏览器合并为一个空格，从而影响视觉间距，这是一个常见的开发陷阱

input 与 img 解析：属于行内块元素而非纯行内元素

许多人误以为 input 是行内元素，实际上它的默认 display 值为 inline-block，属于可替换元素（replaced element）。这意味着它既能像行内元素一样与其他元素并排显示，又能像块级元素一样自由设置 width、height 以及所有方向的 margin 和 padding。

• 不过它天然存在“行内间隙”问题：同一行中的多个 input 之间会产生约4px的空白间距，根源在于HTML解析器将换行和空格当作文本节点处理
• 解决间隙的常用方案：父容器设置 font-size: 0，再单独为 input 设置字体大小；或者使用 vertical-align: top/middle/bottom 进行对齐
• 它无法通过 line-height 实现垂直居中（除非配合 vertical-align 使用），这一点与纯行内元素有所不同

真正容易被忽视的，往往是嵌套限制和外边距合并这类细节问题。例如两个 p 标签的上下外边距会塌陷为其中的较大值；而 span 嵌套在 p 中时，其 margin 并不会影响段落的整体位置。这些规则如果不写入CSS便不会显现，但一旦布局出现错乱，根源往往就隐藏在这些细节之中。