padding
- padding是在width、height的基础上将盒子进行放大。使用box-sizing:border-box,可以禁止padding放大盒子。
- 所有的inline和block都可以使用padding,但inline无法使用box-sizing控制元素大小。
margin
- 所有的inline、block都可以使用margin,但margin: 0 auto;居中只适用块级元素。
- 常见浏览器 body默认margin值
1.ie8为: 16px 8px;
2.ie7为: 16px 11px;
3.其他浏览器为 8px; - margin为负数时,负数的部分会和其他盒子重叠,不会产生间距。
盒子居中的方法
-
如果子盒子的宽高无要求,可设置父盒子的padding、box-sizing、子盒子宽高100%来实现。如下:image.png
-
如果子盒子是固定宽高,可设置父盒子display:flex; align-items:center; 子盒子 margin: 0 auto;来实现。如下:
image.png margin: 0 auto; 上下0 左右居中。
margin: 10px auto 50px; 上10 左右居中 下50。
margin: 10px auto 0; 上10 左右居中 下无。
inline和inline-box无法使用 margin: 0 auto;
margin padding使用百分比时,百分比铆钉的是父级元素的宽度。

