Home > Article > Web Front-end > How to use css padding attribute
css padding attribute definition and usage
In css, the padding attribute is a shorthand attribute used to set all padding attributes ( Padding), define the top margin property, right margin property, bottom margin property, and left margin property in the same statement.
css padding attribute syntax format
1.padding: attribute value 1 attribute value 2 attribute value 3 attribute value 4
2. padding: attribute value 1 attribute value 2 attribute value 3
3.padding: attribute value 1 attribute value 2
4.padding: attribute value 1
Description :
1. When the padding attribute has 4 attribute values: the four attribute values define the top padding, right padding, bottom padding, and left padding respectively
2. When the padding attribute has three attribute values: attribute value 1 and attribute value 3 define the top padding and bottom padding respectively. Attribute value 2 defines the right padding and left padding
3. When the padding attribute has two attribute values: attribute value 1 defines the top padding and bottom padding. Attribute value 2 defines the right padding and left padding
4. When the padding attribute has only one attribute value: this attribute value defines the top padding, right padding, bottom padding, left padding Padding
Possible attribute values
auto: The browser calculates the padding
length: Specifies the padding in specific units Value, such as pixels, centimeters, etc. (default is 0px)
%: Specifies the padding based on the percentage of the width of the parent element
inherit: Inherits the value of the padding attribute from the parent element
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css padding属性设置元素内边距</title> <style type="text/css"> div{width:260px;border:1px solid #000;padding:10px 20px 30px 40px;} </style> </head> <body> <div>padding属性设置元素内边距,这是为了演示效果所添加的文本。 padding:12px 14px 16px 18px;</div> </body> </html>
Run result
The above is the detailed content of How to use css padding attribute. For more information, please follow other related articles on the PHP Chinese website!