一:PADDING
padding用法 用法:
1:padding是在盒子里面,在盒子与内容之间。
2:padding的作用:控制子元素在父元素里面的位置关系。
3:padding会把盒子撑大。
4:如果想让盒子保持原有的大小:在宽高基础上减掉。( 如果一个元素是被内容撑开的,没有设置固定的宽高,padding直接撑开。不用减掉 )
5:如果给单一方向添加padding
padding-top/bottom/left/right
6:padding的设置特点:
padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左
7:padding不会对背景图的位置造成影响。
二:MARGIN
margin用法 用法 (外 (外边距、 距、边界) 界)
1:margin在元素外围,不会撑大元素的大小
2:作用:控制元素与元素之间的间距。
3:给单一方向添加margin
margin-left/right/top/bottom
4 :margin设置方法:
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;
让当前元素在父元素里面左右居中。
6:margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margintop,会错误放在父元素上面。