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

块级元素独占一行、撑满父宽、触发BFC、支持完整盒模型；行内元素不换行、宽高由内容决定、仅左右margin生效、不可嵌套块级（a除外）；input/img为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 就不会暴露，但一旦布局错乱，根源往往就在这里。