使用CSS margin 属性分别定义4个边示例 -- CSS教程

梦之都 CSS教程,margin-top,margin-right,margin-bottom,margin-left示例.

定义了段落的上边外补白为100px,margin-top:100px;所以和上面的段落会有100px的间隔.

定义了段落的上边外补白为30px,margin-top:30px;,下边外补白为10px,margin-bottom:10px;所以和上面的段落会有30px的间隔,和下面段落会有10px间隔.

定义了段落的上边外补白为5px,margin-top:5px;所以和上面的段落之间会有5px的间隔(注意:此间隔还要加上上面段落的10px,所以应该是15px).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>使用CSS margin 属性分别定义4个边示例</title>
		<style type="text/css" media="all">
			p#p1
			{
				margin-top:100px;
				border:thick solid green;
			}		
			p#p2
			{
				margin-top:30px;
				margin-bottom:10px;
				border:thick solid red;
			}	
			p#p3
			{
				margin-top:5px;
				border:thick solid orange;
			}	
		</style>
	</head>
	<body>
		<p>梦之都 <a href="http://www.dreamdu.com/css/">CSS教程</a>,<strong><a href="http://www.dreamdu.com/css/property_margin-top/">margin-top</a></strong>,<strong><a href="http://www.dreamdu.com/css/property_margin-right/">margin-right</a></strong>,<strong><a href="http://www.dreamdu.com/css/property_margin-bottom/">margin-bottom</a></strong>,<strong><a href="http://www.dreamdu.com/css/property_margin-left/">margin-left</a></strong>示例.</p>
		<p id="p1">定义了段落的上边外补白为100px,margin-top:100px;所以和上面的段落会有100px的间隔.</p>
		<p id="p2">定义了段落的上边外补白为30px,margin-top:30px;,下边外补白为10px,margin-bottom:10px;所以和上面的段落会有30px的间隔,和下面段落会有10px间隔.</p>
		<p id="p3">定义了段落的上边外补白为5px,margin-top:5px;所以和上面的段落之间会有5px的间隔(注意:此间隔还要加上上面段落的10px,所以应该是15px).</p>
	</body>
</html>