一、盒子的实际大小：内容的宽和和高度+内边距+边框；

二、关于padding内边距 和Margin外边距的设置）

（1）padding内边距

Padding不同方向设置：

padding:30px;   四个方向的内边距都是一个值；

padding-left:40px;  设置左边的内边距；

padding-right:40px;  设置右边的内边距

padding-top:40px;  设置距离顶部的内边距

padding-bottom:40px;  设置距离底部的内边距

取值的个数不同表示意思不同：

        padding：30px； 表示四个方向的取值都一样；

        padding：30px  60px； 表示：上下   左右  取值；

        padding：30px  50px  60px； 表示：上  左右   下  取值；

        padding：30px   40px   50px   60px  ； 表示：上   右   下  左  取值；

问题：01、如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；

解决方案：加多少减去多少，再减的是还要注意是减去宽度环视高度；

     02、如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大；

（2）margin 外边距

margin不同方向设置：

margin:30px;   四个方向的外边距都是一个值；

margin-left:40px;  设置左边的外边距；

margin-right:40px;  设置右边的外边距

margin-top:40px;  设置距离顶部的外边距

margin-bottom:40px;  设置距离底部的外边距

取值的个数不同表示意思不同：

        margin：30px； 表示四个方向的取值都一样；

        margin：30px  60px； 表示：上下   左右  取值；

        margin：30px  50px  60px； 表示：上  左右   下  取值；

        margin：30px   40px   50px   60px  ； 表示：上   右   下  左  取值；

2、块级盒子水平居中（天天用）

让盒子居中的条件：

01 盒子的显示模式必须为块级元素

02  盒子必须要有固定的宽度

03  利用margin：上下   auto；/ margin：auto；

注意：上下的值可以自定义设置，如果没有设置为 margin:0  auto;

3、文本居中属性text-align: center;和margin:auto;的区别

text-align: center; 是让父级盒子里面的文本、行内元素（span/a/em）、行内块元素(img/input)水平居中显示;

margin:auto;  只让块元素水平居中显示;

三、常见问题

（1）行内元素设置外边距margin和padding的问题

给行内元素设置margin-top、margin-bottom、padding-top、padding-bottom是不会显示效果的；如果想要让他们生效怎么处理？

解决方案：01、不要添加；

           02、将行内元素的显示模式用display: block;转换给块元素或者用display: inline-block;转换行内块元素；

（2）垂直排列的盒子外边距合并

问题：两个盒子如果垂直排列，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；

解决方案：不要同时设置，只给一个盒子设置即可；

（3）嵌套垂直外边距合并

问题：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：

1、为父级设置上边框（不用，因为添加了border父级的高度会增大）

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；

3、直接给父级添加overflow:hidden;（常用方法）

一、盒子的实际大小：内容的宽和和高度+内边距+边框；

二、关于padding内边距 和Margin外边距的设置）

（1）padding内边距

Padding不同方向设置：

padding:30px;   四个方向的内边距都是一个值；

padding-left:40px;  设置左边的内边距；

padding-right:40px;  设置右边的内边距

padding-top:40px;  设置距离顶部的内边距

padding-bottom:40px;  设置距离底部的内边距

取值的个数不同表示意思不同：

        padding：30px； 表示四个方向的取值都一样；

        padding：30px  60px； 表示：上下   左右  取值；

        padding：30px  50px  60px； 表示：上  左右   下  取值；

        padding：30px   40px   50px   60px  ； 表示：上   右   下  左  取值；

问题：01、如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；

解决方案：加多少减去多少，再减的是还要注意是减去宽度环视高度；

     02、如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大；

（2）margin 外边距

margin不同方向设置：

margin:30px;   四个方向的外边距都是一个值；

margin-left:40px;  设置左边的外边距；

margin-right:40px;  设置右边的外边距

margin-top:40px;  设置距离顶部的外边距

margin-bottom:40px;  设置距离底部的外边距

取值的个数不同表示意思不同：

        margin：30px； 表示四个方向的取值都一样；

        margin：30px  60px； 表示：上下   左右  取值；

        margin：30px  50px  60px； 表示：上  左右   下  取值；

        margin：30px   40px   50px   60px  ； 表示：上   右   下  左  取值；

2、块级盒子水平居中（天天用）

让盒子居中的条件：

01 盒子的显示模式必须为块级元素

02  盒子必须要有固定的宽度

03  利用margin：上下   auto；/ margin：auto；

注意：上下的值可以自定义设置，如果没有设置为 margin:0  auto;

3、文本居中属性text-align: center;和margin:auto;的区别

text-align: center; 是让父级盒子里面的文本、行内元素（span/a/em）、行内块元素(img/input)水平居中显示;

margin:auto;  只让块元素水平居中显示;

三、常见问题

（1）行内元素设置外边距margin和padding的问题

给行内元素设置margin-top、margin-bottom、padding-top、padding-bottom是不会显示效果的；如果想要让他们生效怎么处理？

解决方案：01、不要添加；

           02、将行内元素的显示模式用display: block;转换给块元素或者用display: inline-block;转换行内块元素；

（2）垂直排列的盒子外边距合并

问题：两个盒子如果垂直排列，上面的盒子设置了margin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；

解决方案：不要同时设置，只给一个盒子设置即可；

（3）嵌套垂直外边距合并

问题：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：

1、为父级设置上边框（不用，因为添加了border父级的高度会增大）

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；

3、直接给父级添加overflow:hidden;（常用方法）