margin

一般设定:

*{
	margin:auto;
	padding:0;
	border:0;
}
#a {
	width:50px;
	height:60px;
	background-color:#E8E8E8;
}
#b {
	width:60px;
	height:50px;
	background-color:#A0A0A0;
		}
外边框的嵌套:

<style type="text/css">
	*{
		margin:auto;
		padding:0;
		border:0;
	}
	#a {
		width:150px;
		height:160px;
		background-color:#E8E8E8;
		margin-left:100px;
		margin-top:10px;
	}
	#b {
		width:60px;
		height:50px;
		background-color:#A0A0A0;
		margin-left:0;
	}
</style>
</head>
<body>
	<div id="a">
		<div id="b"></div>
	</div>	
</body>
注:由于被嵌套的内容会自动“继承”a的内容,所以外边框的属性可以默认为0.
内容之间的外边框设定:

<style type="text/css">
	*{
		margin:0;
		padding:0;
		border:0;
	}
	p.a {
		width:150px;
		height:160px;
		background-color:#E8E8E8;
		margin-left:100px;
		margin-top:20px;
		margin-left:0;
		margin-bottom:20px;
		}
	p.b {
		width:60px;
		height:50px;
		background-color:#A0A0A0;
		margin-left:0;
		margin-top:20px;
		}
	</style>
</head>
<body>
	<p class="a">aaa</p>
	<p class="b">sssss</p>		
</body>

你可能感兴趣的:(margin)