Home > Web Front-end > CSS Tutorial > How to use css padding attribute

How to use css padding attribute

silencement
Release: 2019-05-27 15:47:51
Original
4920 people have browsed it

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>
Copy after login

Run result

How to use css padding attribute

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template