DIV CSS padding inner padding (padding) left right top bottom_html/css_WEB-ITnose

DIV CSS padding内补白(内边距)left right top bottom语法应用案例教程

Padding是比较常用CSS样式，可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。接下来DIVCSS5从基础语法到应用示范、简写用法讲解CSS padding样式。

一、padding语法结构与说明   -   TOP

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设置四边用法案例   -   TOP

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

1、padding案例CSS代码

 

2、案例HTML代码

DIVCSS5 padding使用案例

3. Screenshots of padding usage application cases

Padding case illustration screenshots of padding usage demonstration in the software

Actual effect in browser:

Padding application browser test Result image

4. Case summary

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

3. Padding abbreviation and cases - TOP

1. The four sides are the same and the padding abbreviation is the same. If the padding setting value is the same on the four sides, if it is 5px, the original expression is: 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 is 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;

Graphic description padding abbreviation

Padding optimization abbreviation analysis chart

3. The left and right are the same, but the top and bottom are different The value padding abbreviation is if the padding left and right is 10px, the top is 20px, and the bottom is 30px

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

The abbreviation can be: Padding:20px 10px 30px;

The first 20px in the former represents 20px on padding-top, and the second 10px represents 10px on padding-left and padding-right. Three 30px represents padding-bottom: 30px

4. Three sides are the same, but one side has a different value. If any three sides have the same value, and the other side is 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 that the browser reads from top to bottom and from left to right, so we can first set the four sides to be the same , then add a different style value on the other side.

Extended reading: 1. HTML compression optimization 2. CSS compression optimization 3. CSS optimization 4. CSS word spacing

4. Padding css summary - TOP

Padding style is the one we use more frequently CSS style attributes. Generally, we use padding to set the upper, lower, left, and right margin intervals within an object. Of course, if we encounter 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 style, and try to use CSS abbreviation style to save CSS code. Simple example of css padding.