<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内填充和外边距</title>
<style>
.box{
width: 240px;
height: 240px;
background-color: blue;
padding: 30px;/* 内填充的作用：元素和其内容之间的间距 ；四周全有；需要更改宽度和高度*/
}
p{
width: 100px;
background-color: red;
}
/* 外边距的作用：兄弟元素之间的间距 */
.a{
width: 300px;
height: 300px;
background-color: #a8ff4a;
/* margin: 40px;/* margin四周都有 */
margin:40px 10px ;/* 两个值：上下为40px，左右相同为10px
四个值：上 右 下 左（顺时针）*/
/* margin: 0 auto;在页面中水平居中 */
}
.b{
width: 300px;
height: 300px;
background-color: #eb77ff;
}
</style>
</head>
<body>
<div class="box">
<p>
hello word
</p>
<p>
你好世界
</p>
</div>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
