CSS中padding,border和margin的区别

第一步
首先我们设置两个大小相同但颜色不同的标签

	<view class="box">
		<view>这里是内容</view>
	</view>
		
	<style>
	.box{
		background-color: #0000ff;
		width: 200upx;
		height: 200upx;
	}
	.box view{
		background-color: #00ff00;
		width: 200upx;
		height: 200upx;
	}
	</style>

效果如图，外部的< view>为蓝色，内部< view>为绿色，因为大小相同所以外部蓝色的标签被覆盖了，看不到。

第二步
为外部< view>增加padding属性

	<view class="box">
		<view>这里是内容</view>
	</view>
		
	<style>
	.box{
		background-color: #0000ff;
		width: 200upx;
		height: 200upx;
		padding: 50upx;
	}
	.box view{
		background-color: #00ff00;
		width: 200upx;
		height: 200upx;
	}
	</style>

效果如图，原有的外部标签被扩大，显示出了他的蓝色

第二步
为外部< view>增加border属性

	<view class="box">
		<view>这里是内容</view>
	</view>
		
	<style>
	.box{
		background-color: #0000ff;
		width: 200upx;
		height: 200upx;
		padding: 50upx;
		border: 50upx solid #09BB07;
	}
	.box view{
		background-color: #00ff00;
		width: 200upx;
		height: 200upx;
	}
	</style>

效果如图，因为增加边框的缘故外部的< view>标签被进一步扩大，并且边框可以单独设置颜色。

第三步
为外部< view>增加margin属性

	<view class="box">
		<view>这里是内容</view>
	</view>
		
	<style>
	.box{
		background-color: #0000ff;
		width: 200upx;
		height: 200upx;
		padding: 50upx;
		border: 50upx solid #09BB07;
		margin: 50upx;
	}
	.box view{
		background-color: #00ff00;
		width: 200upx;
		height: 200upx;
	}
	</style>

效果如图，因为设置了元素之间的间距，外部< view>标签与边框之间产生了距离。