How to use padding attribute in css

Padding是比较常用CSS样式，我们可以利用padding样式来设置内边距，下面我们从基础语法到应用示范最后举一个小列子来给大家说一下padding样式如何使用，

padding语法结构与说明  

padding : +数值+单位 或 百分比数值

div{padding:5px}设置对象距离四边边距为5px间隔

同时可以单独设置左、右、上、下边距离发布设置

1、padding-left 设置对象距离左边的边距补白间隔

div{padding-left:5px}

对象内距离左边补白间距为5px

2、padding-right 设置对象距离右边的边距补白间隔

div{padding-right:5px}

对象内距离右边补白间距为5px

3、padding-top 设置对象距离上边的边距补白间隔

div{padding-top:5px}

对象内距离上边补白间距为5px

4、padding-bottom 设置对象距离下边的边距补白间隔

div{padding-bottom:5px}

对象内距离下边补白间距为5px

div css Padding说明

检索或设置对象四边的补丁边距。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

Padding的值不能为负值。

Padding位于对象（边框）以内，或这样说padding样式是位于对象内的内容区域与边框之间。

padding设置四边用法案例 

为了对padding用法进一步了解，我们设置一个对象分别设置4边不同的padding补白间距，并且设置对象CSS宽度，css 高度、CSS边框属性样式。为了便于观察padding存在，我们设置padding-left（左）为20px,padding-right（右）为30px，padding-top（上）为40px，padding-bottom（下）为50px。

1、padding案例CSS代码

.div{ width:350px; height:80px; border:1px solid #00F; 

padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px} 

 

2、案例HTML代码

padding使用案例

4. Case summary

padding is used to set the style of the distance from the four-sided border within the object to the content area, so to achieve spacing within the object, you can use css div + padding.

3. Padding abbreviation and case

#1. The four sides are the same. The padding abbreviation

If the padding setting value is the same on the four sides, if it is 5px, Original expression:

padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;

can be abbreviated in CSS as:

padding:5px;

2. The abbreviation of different padding on the four sides

Just like the different padding values ​​on the four sides in our second tutorial, padding-left:20px;padding-right:30px;padding- top:40px;padding-bottom:50px

We can abbreviate it as:

Padding:40px 30px 50px 20px;

Note that each value is separated by a space

Explain the meaning

The first 40px represents "top" padding-top:40px;

The second 30px represents "right" padding-right:30px;

The third 50px represents "bottom" padding-bottom:50px;

The fourth 20px represents "left" padding-left:20px;

3. The left and right sides are the same, top and bottom Abbreviations for padding with different values

If padding is 10px on the left and right, 20px on the top, and 30px on the bottom

General writing method:

padding-left:10px;padding-right:10px; padding-top:20px;padding-bottom:30px

The abbreviation can be:

Padding:20px 10px 30px;

The former first 20px represents the padding-top. 20px,

The second 10px represents padding-left and padding-right of 10px

The third 30px represents padding-bottom: 30px

4. Three sides Same, but one side has different values

If any three sides have the same value, but the other sides are different, we can still abbreviate it.

EXP

If the padding is 10px on the top and left and 20px on the bottom, the CSS style is generally written like this

padding-left:10px;padding-right:10px;padding -top:10px;padding-bottom:20px

The abbreviation is:

padding:10px;padding-bottom:20px

Note that the order cannot be reversed. The trick here is to browse The reader reads from top to bottom and from left to right, so we can first set the four sides to be the same, and then add a different style value for the other side.

Extended reading:

1.html compression optimization

2.css compression optimization

3.css optimization

4.css Word spacing

padding css summary

Padding style is a CSS style attribute that we use more frequently. Generally, we use padding to set the upper, lower, left, and right margin intervals within an object. Of course, if we encounter the indentation of the beginning text, we can use the css text-indent style. When using padding, pay attention to the increase or decrease in width. Padding takes up the width and height. If the total width is 500px, and a 10px padding style is set on the left and right, the width of the content area will become 480px. At the same time, pay attention to the meaning of the abbreviation PADDING when using the style. Try to use CSS abbreviations like

There are so many ways to use padding. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to set paragraph line height and line spacing in HTML

How to use HTML5

tag

How to write html document type declaration

The above is the detailed content of How to use padding attribute in css. For more information, please follow other related articles on the PHP Chinese website!