padding和margin属性及应用注意点

 用途：默认的盒子内容紧贴盒子边缘

padding属性就是指让让盒子里面的内容与边框产生距离。

padding属性及注意点

padding基本用法

    <style>
        div {
            width: 200px;
            height: 400px;
            padding-left: 20px;
        }
    </style>

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下內边距

内边距的复合型写法：

padding:5px; 
/* 1个值，代表上下左右都有5像素内边距； */
padding:5px 10px; 
/* 2个值，代表上下内边距是5像素 左右内边距是10像素； */
padding:5px 10px 20px; 
/* 3个值，代表上内边距5像素 左右内边距10像素下内边距20像素： */
padding:5px 10px 20px 30px; 
/* 4个值，上是5像素 右10像素 下20像素 左是30像素顺时针 */

padding 注意点：

再给盒子指定padding值后影响了实际盒子的大小。

也就是说：内容和边框有了距离撑开了盒子大小。

加padding不会撑开盒子的情况：

盒子本身没有指定width/height的属性

解决方案：

为了保障盒子的大小和效果图一致，就要让width/height减去多出来的内边距大小。

例如：

在上述例子中为让盒子保持200px的高和宽就要

    div {
        width: 160px;
        height: 160px;
        padding: 20px;
    }

margin的运用及注意点

运用margin让块级盒子水平居中

1，盒子必须制定了就宽度

2，盒子的左右外边距都指定为auto

常见写法（以下三种都可以）：

（行内元素或者行内块元素给父级添加text-align：center）

        .nav {
            width: 200px;
            height: 400px;
            margin: auto;
            /* margin: 0 auto;
            margin-left: auto;
            margin-right: auto; */
        }

嵌套元素塌陷问题

当我们想要实现子盒子相对于父盒子有边距时，

        .father {
            width: 300px;
            height: 300px;
            background-color: paleturquoise;
            margin-top: 400px;
        }
        .son {
            width: 20px;
            height: 55px;
            background-color: papayawhip;
            margin-top: 300px;
        }

运行代码后发现并没有实现想要的效果，原因是两个嵌套关系的块级元素，父子元素同时有上边距时。父元素会塌陷较大的外边距值（比较父子元素的外边距值，谁的大就塌陷那个大的外边距值）

解决方案有三种：

1. 为父元素定义一个上边框
2. 为父元素定义一个内边距
3. 为父元素添加overflow：hidden；