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

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

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

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

• 常见误写：<p>文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>子容器</div> → 实际解析为 <p>文字</p> <div>子容器</div>
• 合法替代：<p>文字<span class="block-wrapper">子容器</span></p> + CSS .block-wrapper { display: block; }
• 语义优先：若真需结构嵌套，用 <section></section> 或 <article></article> 替代 <div>，它们是多目标块级元素，嵌套更自由 <h3> <code>display: inline-block 的空隙是怎么来的，怎么去掉

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

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

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

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

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

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

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

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