padding/margin/border

关于padding、margin、border的使用

假如两个盒子，父盒子包含子盒子，子盒子中存放内容。

padding

padding是内容距离子盒子的距离，padding：10px，内容距离子盒子的上下左右各10像素。
一个值 ：还可以确定不同位置的padding值：padding-left:10px，内容距离盒子左面10px。padding-right:10px；padding-button：10px； padding-top：10px ，效果一样
两个值：pading：10px 20px；前面一个值表示上下的值，后面一个值表示左右的值。
三个值：padding：10px 20px 10px；第一个值表示上，第二个值表示左右，第三个值表示下。
*四个值：padding：10px 20px 10px 10px；则表示从顶部开始，逆时针旋转的各个面的距离。

padding有可能会撑破盒子，使盒子塌陷，因此在使用padding 的时候，要考虑内容的大小，盒子的大小，以及padding的值：padding +内容<=盒子的大小，这样就不会塌陷了。

---

margin

margin表示的是子盒子与父盒子的距离
使用方法与padding类似。

---

border

border是对于边框的操作，使用方法类似。边框的大小不会改变包含的盒子里的内容的的大小，但是会影响整个盒子的大小。