# margin vs padding属性:|margin 外边距|padding 内边距|

margin vs padding

属性	margin 外边距	padding 内边距
作用	盒子外部的距离，盒子和别的盒子之间的空隙	盒子内部的距离，内容和盒子边框之间的空隙
背景色	不会渲染背景，背景穿透	会继承盒子背景颜色
占用盒子尺寸	不增大盒子本身宽高（标准盒模型）	会撑大盒子实际大小
正负值	✅支持负数，可以让盒子重叠	❌不支持负数
简写	margin:上 右 下 左;	padding:上 右 下 左;

通俗理解

一个相框：

• padding：照片到相框边框之间的留白（相框内部）
• margin：整个相框和旁边另一个相框之间的距离（相框外面）

常用示例

/* 四周外边距10px，盒子向外推开别的元素 */
margin:10px;

/* 四周内边距10px，把内部内容往里面挤 */
padding:10px;

小程序踩坑重点（你写表格会遇到）

1. scroll-view 不要给本身加 margin，会导致滚动区域被裁切、横向滚动失效；外边距写到外层父容器。
2. 表格单元格用 padding 做单元格内部留白，不要用 margin；flex子元素margin容易出现滚动计算异常。

box‑size 小补充

box-sizing: border-box;

开启后：padding/border 不会撑大盒子设定的宽高，写表格强烈建议加上。

简单记忆：
📦 margin：离别人多远
📦 padding：自己内部留多少空白

需要我给你一段小程序表格通用重置css直接复制吗？