<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.father{
border:1px solid #000000;
width:200px;
height: 200px;
margin: 0 auto;
/* padding: 10px; 为盒子的上下左右分别填充10px */
/* padding: 50px 40px 30px 20px ; 会将盒子按上,右,下,左的顺序分别给盒子设置填充50(上), 40(右), 30(下), 20(左)*/
/* padding: 50px 40px ; 会将盒子的上下设置为50, 左右设置为40*/
padding:50px 40px 30px; /* 会将盒子的上设置为50 左,右设置为40 下设置为30*/
}
.son{
border:1px solid #000000;
width:100px;
height: 100px;
}
</style>
<body>
<div class="father">
这是
<div class="son">
</div>
</div>
</body>
</html>单独为padding设置值
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
计算盒子宽高
宽: border-left + padding-left + width + padding-right + border-right
高: border-top + padding-top + height + padding-bottom + border-bottom
为一个div设置padding属性, 那么就会把这个div扩充(div的width,height属性固定了div内容的大小，padding会在这个基础上扩充div的大小)