學習筆記，僅供參考，有錯必糾
參考自：某不知名網課
文章目錄
- 盒子模型
- 内邊距(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> 頁面：
審查元素：