padding 不能设负值，因为它是内容区域到边框之间的内部填充空间，语义上必须非负；浏览器直接忽略负值（按0处理），所有主流浏览器均不支持，CSS规范强制要求其值≥0。
padding 为什么不能设负值？
因为 padding 是内容区域到边框之间的“填充空间”，它属于元素内部的结构组成部分，语义上必须是“存在且非侵入”的——负值会逻辑冲突：内容不可能“穿透”边框向内收缩，也不该影响相邻元素布局。浏览器直接忽略负 padding 值（设了也当 0 处理）。
常见错误现象：
写成 padding: -10px; 或 padding-top: -5px;，结果毫无反应，开发者误以为是样式未生效或选择器错误。
- 所有主流浏览器（Chrome/Firefox/Safari/Edge）均不支持负
padding，这是 CSS 规范强制要求 -
padding只接受length（如px、em）或percentage，且必须 ≥ 0 - 行内元素（如
）设负padding同样无效，且上下padding不参与文档流高度计算
margin 能负值，但不是为了“缩进”
margin 允许负值，是因为它的作用域在边框之外，本质是“挪动整个盒子的位置”，不破坏内部结构。但它常被误用为“让内容往里缩”——这恰恰是 padding 的职责。
典型误用场景：
想让按钮文字更靠近左边，却写 margin-left: -8px;，结果整颗按钮左移，可能压住前一个元素，甚至触发父容器重排。
- 负
margin的合法用途：实现元素重叠、取消默认间距（如margin-top: -24px;抵消标题默认外边距）、模拟“吸顶”或“嵌入式”布局 - 块级元素垂直方向相邻
margin会合并（collapsing），负值参与合并计算——比如margin-bottom: -10px;和margin-top: 20px;合并后实际间距是10px，不是30px - 负
margin不影响元素自身尺寸，但可能造成内容溢出或滚动条意外出现
什么时候该用 padding，什么时候该用 margin？
判断依据只有一个：你调整的空间，是在边框里面，还是边框外面。
使用场景对比：
- 要让文字离边框有呼吸感 → 用
padding（背景色/边框会延伸过去） - 要让两个
段落之间空一行 → 用margin（透明，不干扰各自背景） - 按钮点击区域需要更大 → 加
padding，不是margin（后者只推远按钮，不增大可点范围） - 让一个
div在父容器中水平居中 →margin: 0 auto;（margin控制外部定位） - 输入框内容不贴边 →
padding，且建议配合box-sizing: border-box;防止宽度失控
box-sizing 改变的是“谁来扛尺寸变化”
默认 box-sizing: content-box; 下，加 padding 就会让元素变大；而 border-box 把 padding 和 border “塞进”你写的 width 里。这不是修复 padding 的问题，而是改变尺寸归属逻辑。
容易踩的坑：
全局写了 * { box-sizing: border-box; }，但忘了某些第三方组件依赖 content-box 行为，导致内边距表现异常。
- 推荐在项目根样式中统一设置
* { box-sizing: border-box; }，避免反复计算总宽 -
box-sizing不影响margin——无论哪种模式，margin都永远游离于尺寸计算之外 - 对
textarea、select等表单控件，部分浏览器仍存在box-sizing兼容性差异，建议显式声明
负 padding 不存在，不是浏览器没做，而是它根本没意义——盒子模型里，内容和边框之间没有“反向空间”的概念。真正容易混淆的，其实是“想调内部却动了外部，或反过来”。盯住边框那条线，就清楚该往哪边加值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
