padding
padding 简写属性在一个声明中设置所有内边距属性,盒子以内与content内容之间的距离为内边距。(浏览器中浅绿色部分就是padding)

书写方式
padding属性也有四种写法以及单独使用
/*值的顺序为上 右 下 左内边距*/
padding:10px 5px 15px 20px;
/*上 左右 下*/
padding:10px 5px 15px;
/*上下 左右*/
padding:10px 5px;
/*4 个内边距都是 10px*/
padding:10px;
/*上内边距*/
padding-top:10px;
margin
margin 作用在当前元素边框以外区域,通常用来控制元素和元素之间的间隔。盒子以外的距离为margin(外边距)

注: 允许使用负值
书写方式
margin属性用法也和上面的padding属性一样,多值书写和指定方向
多值书写:
- 一个值:上 右 下 左
- 两个值:上下 和 左右
- 三个值:上 和 左右 和 下
- 四个值:上 和 右 和 下 左
指定方向:
- 上:margin-top
- 下:margin-bottom
- 左:margin-left
- 右:margin-right
好用的auto
margin: 0 auto;
左右两边设置auto,可以让一个元素居中,a = b的距离

margin-left: auto;
只有左边设置auto,可以让一个元素靠右

margin: 0 auto;
只有右边设置auto,可以让一个元素靠左(其实也就没有设置的必要,因为默认情况 就是靠左的)

注意:正常情况下,margin-top:auto; / margin-bottom:auto; 是无效的
margin的问题
- margin传递问题(给子元素添加margin-top,margin-bottom会传递给父元素),如下图所示:

解决方法:
1.给父级的红色盒子加padding,使红、绿两个盒子顶部保持间隙
2.给父级加边框来阻止触发BFC机制(有种弄个栅栏不让子级margin跑出去的感觉)
3.用一个并列同级元素,代替margin距离。
并列同级元素的height = margin-top / margin-bottom
- margin叠加问题(素1加下外边距,元素2加上外边距;两者之间会产生外边距合并,外边距取两者中的最大值;)

解决方法:
把我们想要的margin加起来加在一个元素身上
盒子组成部分
标准盒模型(content-box):
- 盒子的组成部分:
width + height + padding + border
- 盒子的总宽度:
width(盒子本身的宽度) + padding-left + padding-right + border-left+ border-right
- 盒子的总高度同理:
怪异盒子模型(border-box):
如果说按照标准来测:420
怪异盒子模型(规字的宽度与高度是总宽度与总高度);
content:指盒子的宽度与高度
width(总) = 300 : width(content) + padding-left+padding-right + border-left + border-right
300 = width(content)? + 100(padding-left+padding-right) + 20(border-left + border-right)
300-100-20 = 180
300 - 0 - 0 = 300