CSS padding properties define the blank area between the element border and the element content.
㈠padding (filling)
When ⑴ margins are cleared when the inner element padding (fill), the released area will be filled with elements of the background color.
⑵ separate vertical and horizontal padding filling property can be changed.
⑶ possible values:
⑴length define a fixed filling (pixel, pt, em, etc.)
⑵% fill using a defined percentage value
Note: padding length value accepted attribute value or percentage, but not use negative values.
⑷ Example 1 : If you want all h1 elements each side has 10 pixels of padding, just like this:
h1 {padding: 10px;}
⑸ Example 2 : can also follow up, right, down, left sequence are provided within the margin of each side, each side can be in different units or percentage values:
h1 {padding: 10px 0.25em 2ex 20%;}
(Ii) The percentage value within the margin
⑴ width percentage values relative to the parent element is calculated, which is the same as the margins. So, if the parent element width change, they will change.
⑵ Example 1 : The following paragraphs of this rule to 28% of the margin settings of the parent element width:
p {padding: 28%;}
⑶ Example 2 : If a paragraph element is the parent element div, it is calculated according to the padding width of div.
<div style="width: 200px;">
<P> in the paragraph comprises a width of 200 pixels in DIV. </ P>
</div>
Note: the top and bottom margins and the left and right margins of the same; i.e., upper and lower margins with respect to the percentage of the parent element width will be provided, rather than with respect to the height.
Margin properties within the unilateral
㈢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的所有内容了，希望有所帮助！