块元素与行内元素的换行行为由浏览器默认display值决定，非语义强制：div默认block（独占一行、可设宽高），span默认inline（不换行、宽高无效），img和input默认inline-block（并排且可设宽高）；上下margin对inline元素无布局影响，padding则影响背景但可能被裁剪；结构意图优先于视觉表现，语义与布局需协同。
块元素和行内元素不是“要不要换行”的选择题，而是浏览器渲染时的默认行为规则——改不改，取决于 display 值，而不是标签名本身。
为什么 <div> 会换行而 <code><span></span> 不会？
这不是语义约定，是浏览器内置的初始样式表（user agent stylesheet）把 <div> 设为 <code>display: block，把 <span></span> 设为 display: inline。你可以用开发者工具查看 computed 样式验证这一点。
- 所有 HTML 元素都有默认
display值，它决定“怎么排布”，不是“该不该这么用” -
<img>和<input>默认是display: inline-block，所以能并排、又能设宽高 - 即使你把
<p></p>改成display: inline，它就不再独占一行，也不再撑满父容器宽度
margin 和 padding 在行内元素上为什么“上下无效”？
准确说是：上下 margin 不影响布局流（不会推开相邻元素），但上下 padding 会扩大元素的背景和行高区域；只是因为行内元素不参与块级格式化上下文（BFC），它的垂直方向尺寸由 line-height 和字体度量主导。
-
margin-top/bottom对display: inline元素完全无视觉位移效果（但依然存在，可被 JS 读取） -
padding-top/bottom会增加背景高度，但可能被相邻行内内容“裁剪”或导致行高自动撑开 - 想让上下间距可控？直接切到
display: inline-block或用vertical-align配合
什么时候必须用块元素，什么时候硬要改成行内？
关键看结构意图，不是“看起来像不像”。比如导航菜单项用 <li>（块级）包裹 <a></a>（行内），是因为 <li> 是列表结构单元，需要独立布局上下文；而如果把整个菜单写成一串 <span></span>，就丢失了语义层级，也难以统一控制 hover 区域或响应式断点。
- 需要设置
width/height、垂直对齐、浮动或清除浮动 → 优先块级或inline-block - 仅需局部样式修饰（如高亮一段词、加个图标）→ 行内足够，避免意外换行破坏文案流
- 表单控件如
<input>虽然默认inline，但实际是替换元素（replaced element），它的渲染行为不受普通行内规则完全约束
真正容易被忽略的，是“可替换元素”（<img>、<iframe></iframe>、<video></video>）和“表单控件”在行内上下文中的特殊表现——它们自带固有尺寸和基线对齐逻辑，vertical-align 的默认值（baseline）常导致底部留白，这个坑比 display 类型本身还隐蔽。
