margin的妙用

1.margin还可以用来做平移，作用类似translate哈哈。将元素设成absolute后就可以用margin随便平移他了，既不像relative那样要霸占空间，又不用为父元素设置relative,还可以和top,left,right,bottom组合使用

2.当为div设置padding后有些元素又想占满div， 这时只要设置这个元素的margin为负padding的值就行了 <无>

源码与演示：源码出处 演示出处

<b>marign 妙用1:</b>

<div class="padding20">
	padding20
	<hr class="margin_20"/>
	hr通过margin设成负数占满了div
</div>
<hr/>
<b>marign 妙用2:</b>
<div class="relative">
		absolute,相对位置(需要设置父元素为relative)
		<div class="abs">
			移动到这
		</div>
</div>
<br/>
<hr/>
<div>
	使用relative,相对位置
		<div class="relativeMove">
			移动到这
		</div>
	上边被relative占了一行空间！
</div>
<br/>
<hr/>
<div>
		使用margin,相对位置
		<div class="margin">
			移动到这
		</div>
	没被占用空间
</div>

.relative {
	position: relative;
	width: 300px;
}

.abs {
	position: absolute;
	right: 10px;
	top: -10px;
	color: orange;
}
.margin {
	position: absolute;
	margin-left: 120px;
	margin-top: -30px;
	color: red;
}
.relativeMove {
	position: relative;
	right: -120px;
	top: -30px;
	color: green;
	
}
.padding20 {
	padding: 20px;
	width: 200px;
	border: 1px solid green;
}
.margin_20 {
	margin: 0 -20px;
}