偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《深入理解HTML块级元素与行内元素》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

块级元素与行内元素的核心差异在于默认盒模型行为和HTML语义约束：块级元素独占一行、可设宽高、可嵌套任意元素；行内元素横向排列、宽高由内容决定、不可嵌套块级元素（如

内不能放

），否则解析器将自动闭合，破坏DOM结构。

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

为什么

里不能放

，但

里能放

这不是浏览器“不支持”，而是 HTML 规范明确限制：终端块级元素（如

、

、

）**不允许包含块级内容**。违反时，解析器会自动闭合

，导致 DOM 结构意外断裂。

• 常见误写：

  文字

  子容器
  → 实际解析为

  文字

  子容器
• 合法替代：

  文字子容器

  + CSS .block-wrapper { display: block; }
• 语义优先：若真需结构嵌套，用
  或

  替代

  ，它们是多目标块级元素，嵌套更自由

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

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

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

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

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

• 同属替换元素的还有：、