在上一篇中简单介绍了内边距(padding),今天要说的是元素的外边距(margin)
元素想要和其他元素有间距的话可以使用padding,但是padding会改变元素的大小。我们也可以使用margin来增加间距。我们把人体比作元素,那么margin就是我们的气场。
margin与padding相同,分为4个方向,分别为:
margin-top:上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距
示例如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: 10px;
margin-left: 20px ;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下所示:
margin的值也可以是负数,如下所示:
当同级元素在垂直方向使用了margin时,情况会有一些变化,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
/*下边距*/
margin-bottom: 20px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下:
可以看出,当同时定义了margin-top和margin-bottom时在同为正数时仅采用大的数值。
继续来看负数的情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
/*下边距*/
margin-bottom: -80px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: -10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下所示:
从具体的效果可以看出,在均为负数时,取的事绝对值大的进行处理。
如果为一正一负呢?请看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
/*下边距*/
margin-bottom: 11px;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*上边距*/
margin-top: -10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下所示:
可以看出,当为一正一负时,是由数字相加后的结果进行处理。
margin还可以用来处理元素居中问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: blue;
/*设置垂直方面是20px间距,水平方向是auto(自动居中)*/
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果如下图所示:
设置了水平方向为auto,则元素就会自动居中显示。
当元素为父子关系时,子元素在设置了垂直方向的margin时会将此margin自动传递给父级,由父级展示出相应的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4个方向的margin</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: blue;
/*子元素定义了margin-top*/
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
效果如下图所示:
从上图可以看出,子元素box2的上边距直接传递到了父级box1,则变成了box1的上边距。
如果我们确实是要box2距离box1上边10px,那么就要使用padding来进行处理。
外边距margin的介绍到此结束。
只要你够勤奋,胜利就在你面前!