绝大多数布局问题源于未理解元素默认display类型：div、p、h1~h6、ul、li、section默认block；span、a、strong、em、img、input默认inline；inline元素不支持宽高及上下边距，需改用inline-block或block；语义与显示需统一，避免可访问性与结构问题。
绝大多数布局问题，根源在于没搞清元素默认的 display 类型 —— 不是写错了 CSS，而是没意识到 <div> 和 <span> 天然行为完全不同。
哪些元素默认是 block-level，哪些是 inline
浏览器对每个 HTML 元素都预设了 display 值，不是你写了才生效，而是“不写就按这个来”。比如：
-
<div>、<p>、<h1>～<h6>、<ul>、<li>、<section>默认是display: block -
<span>、<a>、<strong>、<em>、<img>、<input>默认是display: inline
注意：<img> 和 <input> 虽是替换元素（replaced elements），但行为上基本等同于 inline —— 它们不会独占一行，width/height 可设，但上下 margin 和 padding 在旧版 IE 中可能表现异常。
为什么不能随便给 inline 元素设 width/height
因为规范规定：inline 元素的 width、height、margin-top、margin-bottom、padding-top、padding-bottom 对布局无影响（视觉上可能有，但不参与盒模型计算）。常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给
<span>加了width: 200px，结果宽度完全没变 - 给
<a>设置margin-bottom: 20px，文字行高没拉开，下一行也没被推远
解决办法不是“加 !important”，而是改显示类型：display: inline-block 或 display: block —— 后者会强制换行，前者保留同行能力同时支持宽高与垂直边距。
什么时候该用 inline-block 而不是 block
典型场景是「需要并排、又需要控制尺寸和内边距」的 UI 组件，比如导航菜单项、按钮组、图标文字组合：
-
<nav><a href="#">首页</a><a href="#">关于</a></nav>→ 单纯display: inline无法设左右 padding；设block又全掉下行；inline-block刚好 - 老式兼容写法要注意：IE6/7 不识别
display: inline-block对原生 inline 元素（如<span>），得补*display: inline; *zoom: 1触发 hasLayout - 注意空格：多个
inline-block元素间若有 HTML 换行或空格，会被渲染为 4px 左右空白 —— 解决方案要么删空格（<a></a><a></a>连写），要么父容器设font-size: 0再重置子元素字号
别依赖 display 转换来掩盖语义混乱
把 <p> 强制改成 display: inline，或把 <span> 改成 display: block，技术上可行，但容易埋坑：
-
<p>是块级语义，表示一个段落；强行 inline 后，屏幕阅读器仍按段落播报，但视觉上挤在一行，可访问性受损 -
<span>是无语义内联容器；若用来包裹整块表单区域并设display: block，不如直接用<div>更清晰 - 某些元素有硬性约束：比如
<p>不能包含<div>，哪怕你把<div>设成inline，HTML 结构仍是非法的（解析时会被浏览器自动修正）
真正该纠结的不是“怎么让它看起来像我想的”，而是“它本来该是什么”——语义正确了，样式才好收敛，维护成本才低。
