最直接的方法是看浏览器默认渲染：块级元素自动换行、撑满父宽；行内元素不换行、只占内容宽；行内块元素不换行但支持宽高和上下边距。
最直接的方法是看浏览器默认怎么渲染它：块级元素自动换行、撑满父容器宽度；行内元素不换行、只占内容所需空间。
看默认 display 值
每个 HTML 元素在规范中都有明确的默认 display 值，不是靠“感觉”或标签名判断：
-
块级元素 默认
display: block，比如<div>、<p>、<h1>、<ul>、<li> -
行内元素 默认
display: inline，比如<span>、<a>、<strong>、<em> -
行内块元素 默认
display: inline-block，比如<img>、<input>、<button>
打开浏览器开发者工具（F12），选中元素 → 查看 “Computed” 标签页里的 display 值，这是最可靠依据。
观察实际行为表现
不用查文档，也能快速验证：
立即学习“前端免费学习笔记（深入）”；
- 如果两个相同标签上下写，自动分两行显示 → 很可能是块级（如两个
<p>） - 如果两个标签写在同一行还能并排 → 很可能是行内或 inline-block（如
<span>和<a>） - 给它设
width: 200px和margin-top: 10px，生效了 → 不是纯行内（纯行内这两项无效） - 给它设
margin-bottom: 20px，但下方元素没被推开 → 很可能仍是行内元素
注意常见“伪装者”
有些标签容易被误判，因为语义和渲染不完全一致：
-
<a>是行内元素，但 HTML5 允许它包裹<div>—— 语义上要谨慎，渲染时仍按 inline 处理（除非你手动改 display） -
<img>和<input>看似“像图片/输入框”，其实是inline-block，所以能设宽高、上下 margin 也生效 -
<br>不是块级元素，只是强制换行符，不接受任何样式，也不生成盒模型 -
<label>默认 inline，强设display: block再套<input>可能影响屏幕阅读器识别
用 CSS 主动切换类型
display 属性可以覆盖默认行为，这是最灵活的区分手段：
-
display: block→ 强制独占一行，支持全部盒模型属性 -
display: inline→ 强制不换行，宽高和上下 margin/padding 失效 -
display: inline-block→ 不换行 + 宽高/上下边距都生效（但要注意 vertical-align 和空格间隙）
例如把 <span> 改成 inline-block，就能当按钮用；把 <div> 改成 inline，就能让它和文字同行——但要清楚代价：失去宽高控制或布局稳定性。
