margin样式属性

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值