HTML之盒子模型内外边距

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
1.必须是块级元素。
2.盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
实际工作中常用这种方式进行网页布局，示例代码如下：

实际工作中常用这种方式进行网页布局，示例代码如下：

文字盒子居中图片和背景区别
1.文字水平居中是text-align: center
2.盒子水平居中左右margin改为 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

3.插入图片我们用的最多。比如产品展示类
4.背景图片我们一般用于小图标背景或者超大背景图片

section img {  
        width: 200px;/* 插入图片更改大小