Home >Web Front-end >CSS Tutorial >How to use css padding attribute
How to use css padding attribute
- silencementOriginal
- 2019-05-27 15:47:514927browse
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!