css盒子模型的外边距和内边距

一、内边距

1、定义：内边距：盒子中内容与边框之间的距离

2、用法：

(1) 上内边距  padding-top: 20px;

(2) 左内边距 padding-left: 15px;

(3) 下内边距  padding-bottom: 25px;

(4) 右内边距  padding-right: 10px;

(5) 属性值个数不同

① 四个属性值 :上、右、下、左   padding: 50px 40px 30px 10px;

② 三个属性值： 上、左右、下  padding: 50px 40px 30px;

③ 两个属性值： 上下、左右 padding: 50px 20px;

④ 一个属性值： 上下左右 padding: 50px;

补充：内边距的设置会影响盒子的大小

           背景颜色会延申到内边距

            一个盒子的可见框大小，由内容区，内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

二、外边距

1、含义：盒子的边框与其他元素或者浏览器边缘之间的距离

        外边距不会影响盒子可见框的大小 ,但是外边距会影响盒子的位置

2、使用：

① 上外边距  margin-top: 100px;

②  左外边距 margin-left: 80px;

③  下外边距 margin-bottom: 50px;

④  右外边距 margin-right: 200px;

3、设置方法

(1) 四个属性值：上 右 下 左  margin: 90px 70px 50px 20px;

(2) 三个值：上、左右、下margin: 90px 70px 20px;

(3) 两个值：上下、左右margin: 90px 50px;

(4)  一个值：上下左右 margin: 50px;

补充：

外边距可以指定一个为负值

如果外边距设置的是负值，则会向反方向移动

外边距统一可以使用简写属性 margin，可以同时设置四个方向的外边距，规则和padding一样