盒子好比快递小哥的一个快递包裹。把这个包裹延着x轴切开，如下图所示：
盒子的内容就是你网购的商品，盒子的填充就是包裹里面一些泡沫或者报纸保护运输的物品的安全，边框就是包裹的盒子，盒子的外边距是快递小哥来放置快递的时候，快递与快递的距离。对应到css中如上图所示。
content只需确定 width 和 height 就能确定其大小。但是对span元素不适用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
background-color: silver;
height: 100%;
}
.box1{
width: 50%;
height: 50%;
background-color: indianred;
}
span{
width: 500px;
height: 20px;
background-color: indianred;
}
</style>
</head>
<body>
<div class="box1">
<p>hello box</p>
</div>
<span>hello span</span>
</body>
</html>
运行结果如下图：
padding：[<length>|<percentage>]{1,4} 四个元素 一次是顺时针方向 上、右、下、左。
padiing元素的值缩写：
padding 20px ; = padding 20px 20px 20px 20px;
padding 20px 10px ;= padding 20px 10px 20px 10px;
padding 20px 10px 30px;= padding 20px 10px 30px 10px;
时间： 2024-11-03 11:17:05