28.html-盒子模型-内外边距

.内边距：边框与内容之间的距离
<!-- 盒模型内边距：padding
        padding-top：上内边距
        padding-right：右内边距
        padding-bottom：下内边距
        padding-left：左内边距
        padding的合并设置：
                padding:30px;四个方向都一样的30px的内边距
                padding：30px 60px;上下30px 左右60px
                按照   上右下左   的顺序设置值 没有值的话 就从对面的边取
    -->

外边距：设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容
/*盒子模型:由外到内 margin border padding content
            margin:盒子的外边距
            margin-top:上外边距
            margin-right:右外边距
            margin-bottom:下外边距
            margin-left:左外边距
             
            margin的合并设置：
                margin:30px;四个方向都一样的30px的外边距
                margin：30px 60px;上下30px 左右60px
                按照   上右下左   的顺序设置值 没有值的话 就从对面的边取
            */

行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距。

外边距实现盒子居中：
可以让一个盒子实现水平居中，需要满足两个条件：
1、必须是**块级元素**。
2、盒子必须指定了**宽度**。
只需要给左右的外边距都设置为**auto**，就可以使块级元素水平居中。margin: 0 auto;

清除元素默认的内外边距：
* {
    padding: 0;    /*清除内边距*/
      margin: 0;    /*清除外边距*/
}
注意：行内元素只有左右内外边距，是没有上下内外边距的。

文字水平居中和盒子水平居中：
1. 盒子居中使用margin，给定左右边距为auto即可。
2. 文字居中使用：text-align: center;
3. 文字垂直居中：单行文本 line-height， 多行文本padding