margin样式属性

最新推荐文章于 2024-04-15 19:17:28 发布

QBjie

最新推荐文章于 2024-04-15 19:17:28 发布

阅读量630

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107356515

版权

margin：用于在一个声明中设置所有外边距的宽度（上下左右外边距的宽度）

1：margin-top：设置元素的上外边距

2：margin-right：设置元素的右外边距

3.margin-bottom：设置元素的下外边距

4.margin-left：设置元素的左外边距

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<!--<p>白日依山尽</p>
		<div>黄河入海流</div>
		<span>欲穷千里目</span><b>更上一层楼</b>
		
		<style>
			p,div,span,b{
				border: 1px solid red;
			}
                        
			p{
				margin-bottom: 100px;
			}
			div{
				margin-top: 50px;
				
			}
			/*对于上下结构间距取最大 白日依山尽与黄河入海流上下间距100px*/
			span{
				margin-right: 100px;
			}
			b{
				margin-left: 100px;
			}
			/*对于左右结构间距取相加 欲穷千里目与更上一层楼左右间距200px*/
		</style>-->
		<br /><br /><br />
		
		<div>黄河入海流</div>
		<span>欲穷千里目</span>
		<b>更上一层楼</b><span>ok</span>
		<p>白日依山尽</p>
		<style>
                        p,div,span,b{
				border: 1px solid red;
			}
			b,span{
				display: inline-block;/*将其转化为行内块级元素可以看出top于bottom变化*/
			}
			b{
                                /*可以进行缩写*/
				/*margin: 50px;*//*上下左右*/
				/*margin: 50px 100px;*//*上下  左右*/
				/*margin: 50px 50px 10px;*//*上  左右   下*/
				margin: 50px 50px 50px 10px;
			}
		</style>
	</body>
</html>

另外margin:0 auto;——水平居中显示

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<div>黄河入海流</div>
		<style>
			div{
				border: 1px solid red;
				width: 500px;
				margin: 0px auto;/*让块级标签居中显示*/
			}
		</style>
	</body>
</html>