外边距:margin
margin书写格式:
四个值的写法:margin:上 右 下 左;每个值的单位是px,空格隔开。如:margin:10px 12px 2px 3px;其表示元素距离上方有10个像素,右边12个像素,下边2个像素,左边3 个像素;
三个值的写法:margin:上 右 下;如:margin:10px 2px 3px;表示距离上方有10个像素,右边2个像素,下边3个像素,最后一个默认为与之相对应的右边的值,即距离左边也 是2px
两个值的写法:当上下值相等,左右的值也相等时可用;margin:10px 2px;表示距离上方,下面都是10个像素,左边和右边都是2个像素。
一个值的写法:margin:10px;表示距离上,下,左,右都是10px
居中:margin:0 auto;表示在父盒子中左右居中;
除了上面的写法,还可以单独设置某一个方向的边距:
margin-top:设置距离上方的边距
margin-right:设置距离右边的边距
margin-bottom:设置距离下方的边距
margin-left:设置距离左边的边距
注意:
margin-top塌陷现象:一个父盒子里面有一个子盒子,给子盒子设margin-top的时候,父盒子会跟着子盒子一起掉下来的现象。
解决方法: 1)给父盒子加样式:overflow:hidden;
2)给父盒子给父盒子加边框