CSS padding 屬性定義元素邊框與元素內容之間的空白區域。
㈠padding（填充）
⑴當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
⑵單獨使用 padding 屬性可以改變上下左右的填充。
⑶可能的值：
⑴length 定義一個固定的填充(像素, pt, em,等)
⑵% 使用百分比值定義一個填充
注意：padding 屬性接受長度值或百分比值，但不允許使用負值。
⑷示例1：如果你希望所有 h1 元素的各邊都有 10 像素的內邊距，只需要這樣：
h1 {padding: 10px;}
⑸示例2：還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
㈡內邊距的百分比數值
⑴百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。
⑵示例1：下面這條規則把段落的內邊距設置為父元素 width 的 28%：
p {padding: 28%;}
⑶示例2：如果一個段落的父元素是 div 元素，那么它的內邊距要根據 div 的 width 計算。
<div style="width: 200px;">
<p>該段落包含在寬度為200像素的DIV中。</p>
</div>
注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度。
單邊內邊距屬性
㈢padding-top 屬性設置元素的上內邊距（空間）
⑴說明：該屬性設置元素上內邊距的寬度。行內非替換元素上設置的上內邊距不會影響行高計算，因此，如果一個元素既有內邊距又有背景，從視覺上看可能延伸到其他行，有可能還會與其他內容重疊。不允許指定負內邊距值。
⑵示例1：使用百分比值來設置單元格的上內邊距。
<html> <head> <style type="text/css"> td { padding-top: 10% } </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有上內邊距。 </td> </tr> </table> </body> </html>
⑶示例2：使用厘米值來設置單元格的上內邊距。
<html> <head> <style type="text/css"> td {padding-top: 2cm} </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有上內邊距。 </td> </tr> </table> </body> </html>
㈣padding-right 屬性設置元素右內邊距（空白）
⑴說明：該屬性設置元素右內邊距的寬度。行內非替換元素上設置的右內邊距僅在元素所生成的第一個行內框的右邊出現.
⑵示例1：使用百分比值來設置單元格的右內邊距。
<html> <head> <style type="text/css"> td { padding-right: 10% } </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有右內邊距。 </td> </tr> </table> </body> </html>
⑶示例2：使用厘米值來設置單元格的右內邊距。
<html> <head> <style type="text/css"> td {padding-right: 5cm} </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有右內邊距。 </td> </tr> </table> </body> </html>
㈤padding-bottom 屬性設置元素的下內邊距（底部空白）
⑴說明：該屬性設置元素下內邊距的寬度。行內非替換元素上設置的下內邊距不會影響行高計算，因此，如果一個元素既有內邊距又有背景，從視覺上看可能延伸到其他行，有可能 還會與其他內容重疊。不允許指定負內邊距值。
⑵示例1：使用百分比值來設置單元格的下內邊距。
<html> <head> <style type="text/css"> td { padding-bottom: 10% } </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有下內邊距。 </td> </tr> </table> </body> </html>
⑶示例2：使用厘米值來設置單元格的下內邊距。
<html> <head> <style type="text/css"> td {padding-bottom: 2cm} </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有下內邊距。 </td> </tr> </table> </body> </html>
㈥padding-left 屬性設置元素左內邊距（空白）
⑴說明：該屬性設置元素左內邊距的寬度。行內非替換元素上設置的左內邊距僅在元素所生成的第一個行內框的左邊出現.
⑵示例1：使用百分比值來設置單元格的左內邊距。
<html> <head> <style type="text/css"> td { padding-left: 10% } </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有左內邊距。 </td> </tr> </table> </body> </html>
⑶示例2：使用厘米值來設置單元格的左內邊距。
<html> <head> <style type="text/css"> td {padding-left: 2cm} </style> </head> <body> <table border="1"> <tr> <td> 這個表格單元擁有左內邊距。 </td> </tr> </table> </body> </html>
㈦padding 簡寫屬性（在一個聲明中設置所有內邊距屬性）
說明：這個簡寫屬性設置元素所有內邊距的寬度，或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。
⑴示例1：
padding:10px 5px 15px 20px;
- 上內邊距是 10px
- 右內邊距是 5px
- 下內邊距是 15px
- 左內邊距是 20px
⑵示例2：
padding:10px 5px 15px;
- 上內邊距是 10px
- 右內邊距和左內邊距是 5px
- 下內邊距是 15px
⑶示例3：
padding:10px 5px;
- 上內邊距和下內邊距是 10px
- 右內邊距和左內邊距是 5px
⑷示例4：
padding:10px;
- 所有 4 個內邊距都是 10px
以上就是css 內邊距padding的所有內容了，希望有所幫助！