学习笔记，仅供参考，有错必纠
参考自：某不知名网课
文章目录
- 盒子模型
- 内边距(padding)
- 属性设置
- 内盒尺寸计算
- padding什么时候不影响盒子大小
盒子模型
内边距(padding)
padding属性用于设置内边距， 是指边框与内容之间的距离。
属性设置
| 属性 | 作用 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
注意，当我们给盒子指定padding值之后，内容和边框之间有了距离，并且盒子会变大。
如果我们简写成
padding:数值1 数值2 ...
的形式，那么根据数值个数的不同，该css语句表达的意思也不同：
| 值的个数 | 表达意思 |
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
内盒尺寸计算
因为设置padding会撑大盒子，所以我们需要计算盒子的实际尺寸。
- 宽度
Element Height = content height + padding + border
- 高度
Element Width = content width + padding + border
- 举个例子
如果我们设置content高度为100px， content宽度为100px，padding为20px，border为5px，那么盒子会变成宽度为150px，高度为150px：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子</title>
<style>
div {
width: 100px;
height: 100px;
padding: 20px;
border: 5px dashed red;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 页面：
审查元素：
padding什么时候不影响盒子大小
如果没有给一个盒子指定宽度(width)， 那么如果给这个盒子指定padding， 则不会撑开盒子，比如我们不设置p标签的width属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
p {
height: 30px;
padding-left: 30px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>欢迎</p>
</div>
</body>
</html> 页面：
审查元素：