空标签本身不能实现现代样式布局效果，因其无内容、无语义、无默认盒模型尺寸，无法支撑间距、对齐、响应式等布局需求，强行使用会导致结构混乱、可访问性差、维护困难；真正起作用的是CSS布局属性（如flex、grid、margin、padding等），而非空标签本身。
空标签本身不能实现现代样式布局效果，强行用它只会让结构混乱、语义丢失、维护困难。
为什么不能靠空标签做布局
所谓“空标签”，比如 <div></div>、<span></span>，本身不携带内容也不表达语义。浏览器对它们的默认渲染几乎为零（div 是块级但无尺寸，span 是行内且不可设高宽），仅靠它们无法定义间距、对齐、响应式行为等现代布局要素。
常见错误现象包括：
- 页面在不同浏览器中错位（因默认 margin/padding 不一致）
- Flex/Grid 容器内子元素不生效（空标签没内容，但布局引擎仍需可计算的盒模型）
- 无障碍阅读器跳过空标签，损害可访问性
真正起作用的是 CSS 布局属性，不是空标签
现代布局（Flexbox、Grid、定位）依赖的是容器的 display 值和子元素的布局行为，与内部是否为空无关。但你必须提供有明确盒模型含义的结构 —— 这通常意味着：一个非空的容器，或至少设置了尺寸/行为的容器。
立即学习“前端免费学习笔记（深入）”；
可行做法包括：
- 用
<div class="spacer"></div>配合.spacer { height: 20px; }模拟空行 —— 本质是用 CSS 控制高度，不是靠“空” - 在 Flex 容器中放
<div></div>并设flex: 1占位 —— 起作用的是flex，不是空 - 用伪元素
::before/::after生成占位（如清除浮动）—— 更干净，且无需真实 DOM 节点
哪些“空”写法实际被误用最多
开发者常把以下写法当成“空标签布局”，但其实隐患明显：
-
<div></div>放在两个段落之间想“加空行” → 应该用p { margin-bottom: 1.5em; }或margin-top控制间距 -
<br>连续使用制造垂直间隙 → 属于 HTML 结构污染，语义为“换行”，不是“间距”，且无法响应式控制 -
<span></span>加margin-left: 20px实现缩进 →span默认display: inline，上下 margin 无效；应改用padding-left或设display: inline-block
真正需要关注的，从来不是“怎么让空标签起作用”，而是“如何用最小、最语义化的结构 + 精准的 CSS 声明，达成你想要的视觉与行为效果”。空标签没有 magic，CSS 才是那个开关。
