块级元素与行内元素的核心差异在于默认盒模型行为和HTML语义约束：块级元素独占一行、可设宽高、可嵌套任意元素；行内元素横向排列、宽高由内容决定、不可嵌套块级元素（如<p>内不能放<div>），否则解析器将自动闭合，破坏DOM结构。

块级元素和行内元素的核心差异不在“能不能换行”或“能不能设宽高”，而在于默认的盒模型行为与语义约束——前者决定布局流，后者决定嵌套合法性。

为什么 <p> 里不能放 <div>，但 <div> 里能放 <p>

这不是浏览器“不支持”，而是 HTML 规范明确限制：终端块级元素（如 <p>、<h1>、<li>）**不允许包含块级内容**。违反时，解析器会自动闭合 <p>，导致 DOM 结构意外断裂。

• 常见误写：<p>文字<div>子容器</div></p> → 实际解析为 <p>文字</p><div>子容器</div>
• 合法替代：<p>文字<span class="block-wrapper">子容器</span></p> + CSS .block-wrapper { display: block; }
• 语义优先：若真需结构嵌套，用 <section> 或 <article> 替代 <div>，它们是多目标块级元素，嵌套更自由

display: inline-block 的空隙是怎么来的，怎么去掉

那个恼人的 4px 左右间隙，不是 margin，也不是 padding，而是 HTML 解析器把标签间的换行符和空白符当作了文本节点，渲染成一个空格字符。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 复现条件：HTML 中 <img> 和 <button> 并排写在不同行，且父容器字体大小不为 0
• 可靠解法：font-size: 0 在父容器上，再对子元素单独设 font-size
• 副作用注意：若子元素含文本，需显式重置字体大小；Flex/Grid 布局天然规避此问题，推荐新项目优先用

<img> 和 <input> 明明是行内元素，为啥能设宽高

因为它们属于“替换元素（replaced element）”——浏览器根据其内容（如图片二进制、表单控件渲染逻辑）自行决定尺寸，CSS 的 width/height 直接作用于替换内容盒，不走普通行内元素的盒模型限制。

立即学习“前端免费学习笔记（深入）”；

• 同属替换元素的还有：<video>、<iframe>、<canvas>
• 非替换行内元素（如 <span>）设 width 无效，但加 display: inline-block 后就有效 —— 这是显示类型切换，不是“绕过限制”
• 兼容性提示：旧版 IE 对 <input type="file"> 宽高支持不稳定，建议包裹一层 <label> 控制尺寸

什么时候该用 display: block 而不是强行改标签

当语义正确但布局需要调整时，优先用 CSS 改变显示行为；但若语义本身错误（比如用 <span> 表达一段完整段落），再怎么加 display: block 也掩盖不了结构缺陷。

• 该用 CSS 的场景：导航菜单项需垂直堆叠 → nav a { display: block; }
• 该换标签的场景：一段独立说明文字 → 用 <p>，而非 <span> + display: block
• 易忽略点：SEO 和屏幕阅读器依赖语义，display 只影响视觉，不影响可访问性树