
使用说明
1、用来增加元素间距的,外边距跟边框一样,分为上、右、下、左4个方向的边距。
2、margin可以沿着四个不同的方向(top,right,bottom,left)添加,所以在深入研究示例和用例之前,一定要阐明一些基本概念,这一点非常重要。
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!--设置元素的外边距,是让当前元素和四周的元素产生距离,默认各元素的外边距是 0 ,即两个div是贴合在一起的-->
div{
width : 200px ;
height : 200px ;
}
.box 1 {
background : red ;
<!--设置元素box 1 的下外边距,让box 1 的下方和box 2 的上方有 20px 的距离-->
margin-bottom : 20px ;
<!--如果设置两个值得话,那么第一个值代表上下,第二个值代表左右,padding同理-->
// margin-bottom : 20px 50px ;
<!--用外边距设置元素水平居中,不能垂直居中-->
// margin : auto ;
<!--margin还可以设置负值,使当前元素和另一元素边框合并,或者覆盖另一元素-->
// margin-top : -100px ;
}
.box 2 {
background : blue ;
}
<div><div>
<div></div>
|
以上就是css外边距margin的介绍,希望对大家有所帮助。更多css学习指路:css教程
本文教程操作环境:windows7系统、css3版,DELL G3电脑。