CSS深入之其实你可能根本不认识margin和padding（一）

1.我们来解析官方的

margin

是怎么个说法

margin

属性可以为给定元素设置所有四个（上下左右）方向的外边距属性。四个外边距属性设置分别是：

margin-top

，

margin-right

，

margin-bottom

和

margin-left

。指定的外边距允许为负数。

初始值

每一个都是

0

使用的范围

包括所有的元素，但是对于

table

内中

display

类型为

table-caption

，

table

，

inline-table

的元素都是不起作用的，这里要注意是

table

内的元素，比如说

thead

,

tbody

,

tr

,

td

,

tfoot

,

td

，这些，你在里面用

div

这些东西，都是可以起作用的，所以注意了。

还有他也可以被用于

::first-letter

(这个以后会讲)

百分比的用处

这是一个关键的东西，它是相对于包含它的块的宽度进行处理的，为什么要这么设计呢，因为宽度一般都是可控的，你屏幕的宽度一定吧，而高度是随着内容的增加而增多，所以需要以宽度为基准处理。

这个东西是最重要的。

取值

当你使用

auto

的时候，这个值就会被替换为适当的值，不需要你关心。

只有一个值时，这个值会被指定给全部的四个边

两个值时，第一个值被匹配给上和下, 第二个值被匹配给 左和右.

三个值时，第一个值被匹配给上, 第二个值被匹配给 左和右

**第三个值被匹配给 下. 四个值时，会依次按 上、右、下、左 的顺序匹配

(即顺时针顺序).**

2.我们接着来解析官方的

padding

是怎么个说法

padding

属性设置一个元素的内边距，

padding

区域指一个元素的内容和其边界之间的空间，该属性不能为负值。

初始值

都为

0

使用的范围

全部元素，除去

display

为

table-row-group

，

table-header-group

，

table-footer-group

,

table-row

，

table-column-group

和

table-column

。这里要记住的是，

display

为这些的，而不是专指

table

内的元素

取值

指定一个值时 该值指定四个边的内边距

指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距

指定三个值时第一个指定上边的内边距.第二个指定左右两边 第三个指定下边

指定四个值时分别为上 右 下 左（顺时针顺序）

总结

有上述的我们可以知道

margin

和

padding

的百分比是相对于父亲元素的宽度的，到这里我们就基本知道了一个最基础的观念，行内元素中是不能放块级元素的，因为它可以说没有宽度（并不是真正的没有，只是比喻）。

3.让

margin

和

padding

遛起来

实现正方形自适应

实现两栏自适应

实现三栏自适应布局，左右固定长度，中间自适应

…

下一篇将写实现，你们自己可以先玩玩