块级元素与行内元素深度解析：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便不会显现，但一旦布局出现错乱，根源往往就隐藏在这些细节之中。
