标签：位置 特点 外包 填充 左右 距离 top 基础 出现
css盒模型：
是网页布局的基石 盒模型，从里到外包括：
①、内容区————鸡蛋
②、内填充(补白)——泡沫
③、盒子边框(可选)——快递盒子
④、外边距——————盒子外部的距离
1、padding：
padding的用法：
①、padding是长在内容和盒子之间的，在盒子内部
②、padding是为了调整 子元素 在 父元素里面位置关系
③、padding的特点：padding值会把盒子撑大
④、如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值
⑤、给单一方向设置padding值：
padding-left/right/top/bottom:;
⑥、padding 设置方法：
padding为1个值 四周
padding为2个值 上下 左右
padding为3个值 上 左右 下
padding为4个值 上右下左
⑦、padding不能设置负值
⑧、padding不会对背景图造成影响
⑨、如果一个盒子没有设置固定的宽和高，添加padding是不用减的
2、margin：
margin的用法：
①、margin长在元素之外的
②、margin控制的是 同级元素 之间的位置关系
③、margin不会对盒子本身的宽高造成影响
④、给单一方向添加margin值：
margin-left/right/bottom/top:;
⑤、margin的设置方法：
margin:1个值 四周
margin:2个值 上下 左右
margin:3个值 上 左右 下
margin:4个值 上右下左
⑥、margin可以设置负值
⑦、margin常出现的BUG:
①、当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面
②、上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置
⑧、margin:0 auto; 让当前元素在父元素里面左右居中
padding是子元素与父元素之间，margin是子元素与子元素之间，当然也可以子元素和父元素之间用，这个要看情况。
标签：位置 特点 外包 填充 左右 距离 top 基础 出现
原文地址：https://www.cnblogs.com/xiaoxuehtml/p/12595896.html
