内边距:
内边距的设置会影响盒子的大小
盒子的可见大小由内容区(content)、内边距(padding)、边框(border)三部分组成
计算盒子的大小,需要将这三部分累加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>内边距</title>
<style>
.box1{
width:200px;
height:200px;
background-color: chartreuse;
border:2px solid orange;
padding:100px;
}
.inner{
width:100%;
height:100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">
</div>
</div>
</body>
</html>