最直接的方法是看浏览器默认渲染：块级元素自动换行、撑满父宽；行内元素不换行、只占内容宽；行内块元素不换行但支持宽高和上下边距。

最直接的方法是看浏览器默认怎么渲染它：块级元素自动换行、撑满父容器宽度；行内元素不换行、只占内容所需空间。

看默认 display 值

每个 HTML 元素在规范中都有明确的默认 display 值，不是靠“感觉”或标签名判断：

• 块级元素 默认 display: block，比如
  、

  、

  、

  、
• 行内元素 默认 display: inline，比如 、、、
• 行内块元素 默认 display: inline-block，比如 、、

打开浏览器开发者工具（F12），选中元素 → 查看 “Computed” 标签页里的 display 值，这是最可靠依据。

观察实际行为表现

不用查文档，也能快速验证：


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 如果两个相同标签上下写，自动分两行显示 → 很可能是块级（如两个
  ）
• 如果两个标签写在同一行还能并排 → 很可能是行内或 inline-block（如 和 ）
• 给它设 width: 200px 和 margin-top: 10px，生效了 → 不是纯行内（纯行内这两项无效）
• 给它设 margin-bottom: 20px，但下方元素没被推开 → 很可能仍是行内元素

注意常见“伪装者”

有些标签容易被误判，因为语义和渲染不完全一致：

• 是行内元素，但 HTML5 允许它包裹
  —— 语义上要谨慎，渲染时仍按 inline 处理（除非你手动改 display）
• 和 看似“像图片/输入框”，其实是 inline-block，所以能设宽高、上下 margin 也生效
• 
不是块级元素，只是强制换行符，不接受任何样式，也不生成盒模型
• 默认 inline，强设 display: block 再套 可能影响屏幕阅读器识别

用 CSS 主动切换类型

display 属性可以覆盖默认行为，这是最灵活的区分手段：

• display: block → 强制独占一行，支持全部盒模型属性
• display: inline → 强制不换行，宽高和上下 margin/padding 失效
• display: inline-block → 不换行 + 宽高/上下边距都生效（但要注意 vertical-align 和空格间隙）

例如把 改成 inline-block，就能当按钮用；把

改成 inline，就能让它和文字同行——但要清楚代价：失去宽高控制或布局稳定性。