border控制元素自身边框线，padding控制内容到边框间的空白，margin控制边框到其他元素间的空白；三者作用对象不同，不可混用。
border、padding、margin 分别控制什么
边框（border）、内边距（padding）、外边距（margin）是三个独立的 CSS 属性，不能混用。它们作用的对象不同：border 是元素自身的边框线；padding 是内容到边框之间的空白；margin 是边框到其他元素之间的空白。
如何一次性设置四边的 padding 或 margin
用简写语法最常用，避免漏写某一边：
div {
padding: 10px; /* 上右下左都为 10px */
padding: 10px 20px; /* 上下 10px，左右 20px */
padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
padding: 10px 20px 30px 40px; /* 上右下左顺时针 */
margin: 5px 15px; / 同理，适用于 margin /
}
注意：padding 不能设为负值；margin 可以设负值（用于重叠布局），但要小心破坏文档流。
border 设置粗细、样式、颜色必须写全吗
不必须，但缺省值会影响渲染结果。例如：
立即学习“前端免费学习笔记（深入）”；
-
border: 1px solid;—— 缺少颜色，浏览器会按currentColor渲染（通常是文字颜色） -
border: #333;—— 缺少宽度和样式，不会显示边框（因为默认宽度是medium，但medium在无样式时无效） - 推荐写全：
border: 1px solid #ccc;或分开写：border-width、border-style、border-color
另外，border-radius 是独立属性，不影响 padding/margin 计算，但会影响视觉上的“边框范围”。
box-sizing 改变的是什么计算方式
默认 box-sizing: content-box：设置的 width 和 height 仅指内容区，加上 padding 和 border 后整体变大。
换成 box-sizing: border-box：width 和 height 包含内容 + padding + border，更符合直觉，也更利于响应式布局。
* {
box-sizing: border-box;
}这是现代项目几乎必加的重置规则。漏掉它，容易导致“明明设了 width: 300px，结果撑到 320px”的困惑。
真正容易被忽略的是：当元素有 border 且使用 content-box 时，padding 和 border 都会额外增加空间——不是 bug，是标准行为，但常被当成意外。
