margin与padding

一、margin与padding语法结构

单个值(单独设置方向):

  margin-top        margin-bottom        margin-right        margin-left

两个值(第一个值设置上下，第二个值设置左右)：

  margin:  px,  px;

三个值(第一个值设置上方，第二个值设置左右，第三个值设置下方)

  margin:  px  px  px;

四个值(顺时针方向--上下左右)

  margin:  px  px  px  px;

二、margin与padding区别

1.margin主要是指外边距，而padding主要是指填充

通俗来讲 margin用来控制盒子与盒子之间的距离 而padding用来控制填充

margin例子

如图：

 

padding(填充)例子

如图：