- 如果盒子本身没有指定宽度(width)属性,那么此时padding不会撑开盒子的宽度;
- 如果盒子本身没有指定高度(height)属性,那么此时padding不会撑开盒子的高度
示例:开始只给h1指定了高度,但没有指定宽度:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<h1></h1>
</body>
</html>
然后给h1加上padding,此时高度被撑大了,但宽度不变:
再给h1加上宽度( width: 100%;
),此时盒子的宽度被撑大了: