CSS盒模型

CSS盒模型

padding

padding是在内容和盒子直接的，在盒子内部；

padding是为了调整子元素在父元素内部的位置关系；

padding 会改变盒子大小，如果想让盒子大小不变，需要让宽高减去对应padding的值；

padding不能为负值；

padding不会对背景图造成影响；

注：如果一个盒子没有设置固定的宽高，那么padding值就不用减；

margin

​ margine是用来调整外间距的，部分标签默认的都有margin属性
​ 例如：body p ul(这也是为什么不修饰时段落间距间很大)
​ 所以刚开始时，经常用通配符将所有标签自带的外间距设置为0，后续需要的地方再自定义设置添加

共同点：

可以在单一方位加margin或padding，后面最多也可以跟四个值，和border类似；

​ 1个属性值时---->margin/padding:20px; 四周都是20px;

​ 2个属性值时---->margin/padding:0 20px; 上下0 左右20px

​ 3个属性值时---->margin/padding:0 20px 10px; 上0 左右20px 下10px

​ 4个属性值时---->margin/padding:10px 20px 10px 20px; 分别代表上右下左

margin的注意点：

a、如果margin的上间距给的是第一个子元素，调整子元素上间距时时会出错，现象是父元素的上间距被调整
解决方法1：给父元素div添加：overflow:hidden
解决方法2：给父元素div添加上边框：border-top:1px solid transparent；
解决方法3：给此元添加浮动，一般不这样，因为浮动不能随便添加–>

b、如果给盒子一添加margin-bottom：150px; 盒子二添加margin-top:50px; 结果并非是两个盒子间距为200px而是150px，它会以大的间距为准， 而margin-left/right不会出现这个问题；

遇到这个问题，就避免给两个盒子分别加上下间距，直接把总间距给到其中一个盒子即可。

c、margin:0 auto; 让此元素在它的父元素中左右居中；

不同点：

margin可以为负值，padding不能为负值；

**建议：**padding用在父级盒子上。控制子元素在父元素的位置时·，用padding；控制同级元素之间的位置关系时，用margin；