盒子模型——内边距、外边距

内边距——padding

性质：

1.给一个盒子设置内边距会撑开盒子，需要精确的计算盒子的宽和高。可以考虑用css3标签

box-sizing:border-box不会因为设置内边距而撑开盒子。

2.如果盒子不指定width，或者不指定height就不会撑开盒子。

3.padding和text-indent相比更具有优越性，text-indent不能修改文字和盒子边框的距离。

外边距margin：

性质：

1.可以让块级盒子水平居中：

必须有宽度：                                   width：1200px(一般网站的版心宽度)

必须有左右外边距为auto：              margin：0 auto；（上下边距为0，左右边距为auto）

 

2.可以让行内元素和行内块元素水平居中：（不举例说明了，大家可以亲自动手试一试）
 

必须有宽度

左右外边距为auto

为父元素添加text-align：center;

3.如果给嵌套的元素都添加外边距会引起外边距塌陷的问题。

例如：只给父元素添加外边距，效果如图

 给父元素和子元素同时添加外边距，导致塌陷，效果如图

 

4.清楚内外边距

因为电脑浏览器都会有自己自带的pc端的页面样式，在进行网站开发时为了比卖你浏览器的自带样式对网站带来的影响，提升网站的用户体验度，也为了便于前端人员代码编写

在pc端网站的搭建过程中，会有一个专门的初始化css样式，这个文件中就会有清楚内外边距的代码

* {

    /* 把浏览器默认的内外边距清零 */

    margin: 0;

    padding: 0;

    /* css3盒子属性 */

    box-sizing: border-box;

}

如果没有初始化清楚内外边距，浏览器会自带一个内外边距

 

初始化清楚内外边距之后：

 一起加油吧！！！努力一定会有收获！