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; /* 上右下左顺时针 */
<p>margin: 5px 15px;        /<em> 同理，适用于 margin </em>/
}

注意：padding 不能设为负值；margin 可以设负值（用于重叠布局），但要小心破坏文档流。

border 设置粗细、样式、颜色必须写全吗

不必须，但缺省值会影响渲染结果。例如：

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 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，是标准行为，但常被当成意外。