本文详细介绍了CSS中margin和padding的区别，margin用于边框外的间距，padding则用作边框与内容间的填充。使用margin适合在不需要背景色的空白区域增加间距，而padding适用于内容与边框间的需求。注意，垂直方向上的margin值会叠加，且margin可为负值。了解这些原理有助于更精确地控制网页元素布局。
margin和padding的区别以及什么时候使用
首先需要明白，盒子模型主要定义四个区域：内容（content）、边框与内容的区域，称为内边距（padding）、边框（border）、边框与外部的区域，称为外边距（margin）。
区别
使用场景
- 使用margin的场景：
- 需要在border（边框）以外的区域添加空白间距时；
- 空白区域不需要使用背景颜色时
- 注意：上下两个相连的盒子之间使用的外边距需要相互抵消。
- 需要使用负值对页面布局时（注意：margin的值可以取负数，padding的值是不能使负数的）
margin需注意：
margin在垂直方向上相邻的值相同时会发生叠加，水平方向的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠，但是，此时一个为正数，一个为负数，并不是取其中较大的值，而是用边界的绝对值，也就是正的边界值和负的边界值相加。
- 使用padding的场景：
- 需要在border内侧添加空白
- 空白区域需要使用到背景颜色
- 注意：上下相连的两个盒子之间的空白，间距是两者之和
最后，需注意margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间距；margin用于布局分开元素，使元素与元素互不干扰；padding用于元素与内容之间间隔，让内容与元素之间有一段距离。
最后的最后，在怪异盒模型中，一个块的总宽度受marign影响，但不受padding的影响。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
