ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> 元素外边距margin介绍

元素外边距margin介绍(1/2)

来源:网络整理     时间:2018-02-11     关键词:

本篇文章主要介绍了" 元素外边距margin介绍",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 在上一篇中简单介绍了内边距(padding),今天要说的是元素的外边距(margin)元素想要和其他元素有间距的话可以使用padding,但是padding会改...

在上一篇中简单介绍了内边距(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></div>
		<div></div>
	</body>
</html>

    效果如下所示:
 元素外边距margin介绍
     margin的值也可以是负数,如下所示:
 元素外边距margin介绍
 元素外边距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></div>
		<div></div>
	</body>
</html>

    效果如下:
 元素外边距margin介绍
    可以看出,当同时定义了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></div>
		<div></div>
	</body>
</html>

    效果如下所示:
 元素外边距margin介绍

    从具体的效果可以看出,在均为负数时,取的事绝对值大的进行处理。

    如果为一正一负呢?请看代码:

<!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></div>
		<div></div>
	</body>
</html>

    效果如下所示:
 元素外边距margin介绍
      可以看出,当为一正一负时,是由数字相加后的结果进行处理。

margin还可以用来处理元素居中问题:

相关图片

相关文章