1. Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>内边距padding会影响盒子实际大小</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
padding会影响盒子实际大小
</div>
</body>
</html>2. Operation effect:
3. If the size of the box and the renderings are guaranteed to be the same, then the width and height can be subtracted from the extra padding.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>内边距padding会影响盒子实际大小</title>
<style>
div{
width: 160px;
height: 160px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
padding会影响盒子实际大小
</div>
</body>
</html>running result:
The top and bottom margins are 160px, and the inner margin is 20px, so the entire height of the box is 200px
The left and right margins of the weight are 160px and the padding is 20px, so the entire width of the box is 200px