CSS - 内边距与外边距 - 《学习笔记》

margin

`margin`

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。

可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
可取值
- length：固定值
- percentage：相对于包含块的宽度，以百分比值为外边距。
- auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
外边距重叠
- 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
- 左右边距不会折叠
- 父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。 ```css .div-outer { width: 300px; height: 300px; background-color: lightblue; / border-top: 1px solid; / / padding-top: 1px; / / overflow: hidden; / }

.div-outer:before { content: “”; display: table; }

.div-inner { width: 100px; height: 100px; background-color: darkred; margin: 20px auto; / 结合父元素width 居中显示 / }

![](https://cdn.nlark.com/yuque/0/2022/svg/5365225/1661831087245-cc87814d-95d6-4a06-b651-a651beb69158.svg#clientId=uf6fd91f1-aedc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=588&id=u69115cab&margin=%5Bobject%20Object%5D&originHeight=150&originWidth=194&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u7716c825-0f1f-4637-938b-151764ef530&title=&width=761)
<a name="iDCB5"></a>
## `padding`
padding CSS 简写属性控制元素所有四条边的内边距区域。
- 可以接受1~4个值（上、右、下、左的顺序）
- 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
- 可取值
   - length：固定值
   - percentage：相对于包含块的宽度，以百分比值为内边距。
```css
.div-outer {
    width: 300px;
    height: 300px;
    background-color: lightblue;
    padding: 20px 0 0 30px;
}
.div-inner {
    width: 100px;
    height: 100px;
    background-color: darkred;
    padding: 10% 10%;
}