CSS基础(part11)--盒子模型之内边距
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part11)--盒子模型之内边距
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
參考自：某不知名網課
文章目錄
- 盒子模型
- 內邊距(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>頁面：
審查元素：
總結
以上是生活随笔為你收集整理的CSS基础(part11)--盒子模型之内边距的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Word中如何巧妙绘制漂亮分割线
- 下一篇： CSS基础(part12)--盒子模型之