如何区分 HTML 中的 Inline 和 Block 元素？

HTML 中的 Inline（内联）元素和 Block（块级）元素是基于 CSS 的 display 属性或其 HTML 默认特性划分的两种基本元素类别。它们在布局、尺寸、嵌套规则和应用场景上存在关键区别。作为前端工程师在面试中阐述的区别包括以下几点：

• 显示行为不同
  • Block 元素（块级）：默认占用整个父容器宽度，并作为独立块单独换行（例如，新行开始）。这意味着多个块级元素会依次出现在新行上（例如 div、p、h1-h6）。
  • Inline 元素（内联）：在一行内与其他内联元素并列显示，不会产生新行，直到该行容纳不下才自动换行。宽度由内容决定（例如 span、a、img）。
• 尺寸可控性不同
  • Block 元素：可以通过 CSS 设置 width、height，这些属性有效。默认宽度为 100%。
  • Inline 元素：width、height 属性无效，尺寸由内容自然撑开；不可通过 CSS 明确改变其宽高。
• 边距和填充设置不同
  • Block 元素：所有方向的 margin（外边距）和 padding（内边距）都可控制（不影响文档流的基本独占行）。
  • Inline 元素：
    • 水平方向的 margin-left、margin-right、padding-left、padding-right 有效且会影响布局。
    • 竖直方向的 margin-top、margin-bottom 无效（忽略）;但 padding-top、padding-bottom 仍会添加空间（可能重叠相邻元素）。
• 嵌套规则不同
  • Block 元素：常规可以包含其他块级元素和内联元素（例如，div 中包含 p 和 a）。例外情况存在（如 p 元素只允许内联内容）。
  • Inline 元素：只能包含文本或其他内联元素（例如 a 中放 span）；如果试图嵌套块级元素（如 span 中放 div），会触发 HTML 错误提示。
• 常见例子转换方式
  • 块级元素： div, table, ul, ol, h1, p（显示为 display: block 或默认）。
  • 内联元素： span, a, strong, img, input, textarea（显示为 display: inline 或默认）。
  • 可以使用 CSS display: block; 或 display: inline; 强制转换元素的类型，例如： 为元素设置块级或内联性质。

  请注意，虽然这些类别由 HTML 定义，但某些元素的默认 display 会被浏览器覆盖（如 table 默认是 display: table）。上述分类适用于大部分场景，但在布局复杂时建议结合盒模型理解。