背景未铺满主因是元素尺寸、内边距或盒模型理解偏差，background-color 默认覆盖content+padding区域，受border、塌陷、浮动、overflow裁剪等影响。
背景颜色没铺满，通常不是颜色本身的问题，而是元素的尺寸、内边距或盒模型理解有偏差。关键在 background 作用范围默认只覆盖 content + padding 区域，但若设置了 border 或父容器有塌陷、浮动干扰，视觉上就会“漏出”空白。
确认 background-color 是否真没生效
先排除常见误判：
- 用浏览器开发者工具（F12）选中元素，看 Computed 面板里
background-color是否被覆盖或设为transparent - 检查是否写了
background: none或background: #fff url(...) no-repeat—— 后者会覆盖纯色声明，需显式写background-color: #xxx - 确认元素本身有宽高：
display: inline元素无法设宽高，height: 100%在父容器没明确高度时无效
padding 导致“背景看起来没到底”的真相
padding 是内容区与边框之间的空白，它属于背景绘制区域——也就是说，background-color 默认就包含 padding 区域。如果你发现 padding 下方/右侧“没颜色”，大概率是：
- 父容器有
overflow: hidden且子元素因 padding 撑出边界被裁剪 - 子元素用了
margin（外边距不参与背景绘制），误以为是 padding 缺失 - 设置了
box-sizing: border-box但宽高值没预留 padding 空间，导致内容溢出、背景被遮挡
让背景真正“撑满”的实用组合
不依赖猜测，用这几招稳住效果：
立即学习“前端免费学习笔记（深入）”；
-
强制最小尺寸：
min-width: 100%; min-height: 100vh;（适合全屏背景）或min-height: 1px;（防空内容塌陷） -
重置盒模型：
box-sizing: border-box;确保 padding 不额外撑大元素，方便精准控制 -
消除 margin 折叠干扰：父容器加
overflow: auto;或子元素设margin-top: 0;避免顶部留白假象 -
背景延伸技巧：需要背景超出 padding？用
background-clip: content-box | padding-box | border-box显式指定绘制范围（默认是padding-box）
基本上就这些。背景没铺满，90% 是尺寸、盒模型或层叠顺序的小细节卡住了，不是 background 本身不给力。
