元素外边距margin介绍

Java_1010

浏览: 8765 次
性别:
来自: 北京

最近访客更多访客>>

ljl961890233bear

nj_first

109

kamhung

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端

在上一篇中简单介绍了内边距（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的上边距。