css盒模型和margin外边距/padding内边距
<style>
/* css重置 清空浏览器的默认样式 */
* {
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
/* 怪异盒模型（ie盒模型）设置margin pidding 都会包裹在盒子容器里面 不会把内容撑开
比如盒子宽高为200px 设定了怪异盒模型 再设置边框 宽高也不会改变盒子的大小 */
/* box-sizing: border-box; */
}
.box {
background: #f4f4f4f4;
border: 3px solid #777;
width: 500px;
/* padding: 120px; */
/* 设置单边内边距 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
/* 缩写的方式 顺时针方向(上，右，下，左)*/
/* padding: 10px 20px 10px 20px; */
/* 简写单边内边距（对侧值相等 顺时针 上下，左右） */
padding: 10px 20px;
/* 外边距 跟piggin内边距的设置是一样的*/
margin: 20px;
}
.box h3 {
padding-bottom: 10px;
}
</style>
