盒子模型 就是两个背景 红色做背景 黄色在红色上面，然后设置黄色距离红色左右上下的距离，也就是黄色背景在红色背景的位置
盒子的尺寸= 宽高+内边距(padding)+边框(border)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 内边距: padding,当盒子加了内边距后,相应的盒子尺寸会变大,如果想不改变盒子
* 的尺寸,要相应的从宽高减去内边距撑出来的尺寸
* 盒子的尺寸= 宽高+内边距(padding)+边框(border)
* 单属性:
* padding-left 左内边距
* padding-right 右内边距
* padding-top 上内边距
* padding-bottom 下内边距
*
* 复合属性
* padding 一个值 上下左右
* 两个值 上下 左右
* 三个值 上 左右 下
* 四个值 上 右 下 左
*/
.box{
width: 190px;
height: 190px;
background: red;
padding:10px;
/*padding-left:10px;
/* border-left: 10px solid red;*/
/*padding-top:10px;*/
/* padding:10px 20px;*/
/*padding:10px 20px 30px;*/
padding:15px 25px 35px 45px;
}
.phone{
width: 50px;
height: 100px;
background:yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="phone"></div>
</div>
</body>
</html>
margin
* 外边距:margin 盒子与盒子之间的距离
* margin的用法和padding一样
* 盒子的在网页中的占地面积=宽高+内边距+边框+外边距