CSS基础学习四盒子模型margin和padding的使用

demo5（margin设置代码）

<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>demo5</title>
    <!--盒子模型、margin、padding学习-->
  	<style>
  	.div1{
  		margin-top: 20px;
  		margin-left: 30px;
  		margin-bottom: 50px;
  		margin-right: 30px;  		
  		/*margin: 20px;*/  
  		/*margin 外边距*/
  	}
  	.div1,.div2,.div3{
  		width: 400px;
  		height: 400px;
  		background: red;
  		border: 5px solid blue;
  	}
  	.div3{
  		/*margin: 10px 20px 30px 40px;*/ /*上右下左*/
  		margin: 0px auto;
  	}

  </style>
</head>
<body>
	<div class="div1">
		demo5
	</div>
	<div class="div2">
		demo5
	</div>
	<div class="div3">
		demo5
	</div>
 </body>
</html>

demo6（padding和margin差不多的设置代码）

<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>demo6</title>
    <!--盒子模型、margin、padding学习-->
  	<style>
  		.div1{
  			width: 400px;
  			height: 400px;
  			background: red;
  			/*用法和margin差不多*/
  			padding: 10px 20px 30px 40px;
  		}
  </style>
</head>
<body>
	<div class="div1">
		demo5
	</div>
 </body>
</html>

我的个人博客

孤桜懶契：http://gylq.github.io