空盒子不显示高度是因渲染引擎优化导致盒模型被忽略；应优先用min-height替代height，或用::before/after伪元素（content:""）撑高，避免仅依赖padding或line-height。
空盒子不显示高度的常见原因
浏览器默认会折叠没有内容、没有边框、没有内联元素的空 <div>，哪怕你写了 <code>height: 100px，它也可能“看不见”——不是 CSS 失效，而是盒模型在无内容时被渲染引擎优化掉了。
关键点在于：纯空块级元素在标准文档流中，若无其他“撑开”因素（如边框、内联内容、伪元素等），其高度可能被忽略或归零。
用 min-height 替代 height 更可靠
height 是强制固定高度，但对空盒子来说，它只在盒模型有“参与布局”的依据时才生效；min-height 则能确保盒子至少占位指定空间，且不影响后续内容伸展。
- 适用场景：需要预留空白区域（如占位符、加载间隙、响应式留白）
- 兼容性好，所有现代浏览器及 IE9+ 都支持
- 如果后续动态插入文字或子元素，不会因高度被锁死而溢出或裁剪
- 示例：
div.placeholder { min-height: 60px; background: #f0f0f0; }
用 ::before 或 ::after 伪元素强制撑高
当必须用 height 且不能改语义结构时，伪元素是最轻量的“视觉填充”手段——它不污染 DOM，也不影响可访问性，但能触发浏览器为父盒分配空间。
- 必须设置
content: ""，否则伪元素不渲染 - 推荐用
display: block+height组合，避免依赖字体行高 - 注意：若父盒设了
overflow: hidden，伪元素超出部分会被裁剪 - 示例：
div.spacer { height: 0; }<br>div.spacer::before { content: ""; display: block; height: 48px; }
为什么不用 padding-top + padding-bottom？
单靠上下 padding 确实能让空盒子显高，但它本质是“内边距”，会增加盒模型总高度（尤其在 box-sizing: content-box 下），容易和外边距、兄弟元素间距产生意外叠加。
- 若父容器有
flex或grid布局，padding 可能干扰对齐基准线 - 在需要精确控制“可视高度 = 某个数值”时（比如对接设计稿标注），padding 会让实际占用空间变成
padding-top + padding-bottom + border，误差难控 - 更隐蔽的坑：某些 CSS 重置库（如 normalize.css）会重设
font-size或line-height，导致仅靠line-height撑高的方案失效
真正要稳住空盒子的高度，核心就两条：要么用 min-height 让它“至少这么高”，要么用伪元素给它一个不可见但有效的布局锚点。别指望纯 height 在没内容时还老老实实干活——这不是 bug，是盒模型本来的设计逻辑。
