Home > Article > Web Front-end > What does css padding mean?
What does css padding mean?
- 藏色散人Original
- 2021-01-04 11:44:423638browse
css padding is a shorthand attribute that defines the space between the element border and the element content, that is, the top, bottom, left, and right padding; when the padding padding of the element is cleared, the released area will be affected The padding of the background color of the element; using the padding attribute alone can change the top, bottom, left, and right padding.
#The operating environment of this article: Windows 7 system, Dell G3 computer, css3 version.
Recommendation: "css video tutorial"
The padding attribute is a shorthand attribute. It sets all padding attributes in one statement, and can also set the inner margins of each side. The width of the gap. Negative values are not allowed.
Description:
This shorthand attribute sets the width of all padding of the element, or sets the width of the padding on each side. Padding set on inline non-replaced elements does not affect line height calculations;
Therefore, if an element has both padding and background, it may visually extend to other lines, possibly May also overlap with other content. The element's background extends across the padding. Negative margin values are not allowed.
Attribute value:
auto The browser calculates the padding.
length specifies the padding value in specific units, such as pixels, centimeters, etc. The default value is 0px.
% Specifies padding as a percentage of the width of the parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
td.test1 {
padding: 1.5cm
}
td.test2 {
padding: 0.5cm 2.5cm
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td></tr></table></body></html>Rendering:
The above is the detailed content of What does css padding mean?. For more information, please follow other related articles on the PHP Chinese website!