How to use the Padding property in CSS

Padding is a more commonly used CSS style, we can use the padding style to set the padding, the following we from the basic syntax to the application of the demonstration of a small example to tell you how to use the padding style,

padding syntax structure and description

padding: + value + unit or Percentage value

DIV{PADDING:5PX} set object distance from four-sided margin to 5px interval

You can also set left, right, top, and bottom distances separately from the publish settings

1, Padding-left set the object distance to the left margin filter interval

DIV{PADDING-LEFT:5PX}

5px padding between objects within the distance of the left

2, Padding-right set the object distance to the right margin filter interval

DIV{PADDING-RIGHT:5PX}

The right padding between the objects is 5px

3. Padding-top set the padding interval between the object distance and the top edge

DIV{PADDING-TOP:5PX}

The padding between the objects within the object is 5px

4. Padding-bottom set the padding interval between the object distance and the bottom margin

DIV{PADDING-BOTTOM:5PX}

The padding between the bottom of the object is 5px

div CSS Padding Description

Retrieves or sets the patch margins for four edges of an object.

If you provide all four parameter values, the upper-right-bottom-left order is used for four-sided.

If only one is provided, it will be used for all four edges.

If two is provided, the first one is for top-down, and the second is for left-right.

If three is provided, the first one is used on, the second one is for left-right, and the third is for the next.

Inline object to use this property, you must first set the height or width property of the object, or set the Position property to absolute.

The value of padding cannot be negative.

Padding is within the object (border), or so the padding style is located between the content area and the border within the object.

Padding setting four-sided usage cases

To further understand padding usage, we set an object to set 4 sides of different padding padding spacing, and set the object CSS width, css height, CSS border property style. To make it easier to observe the presence of padding, we set padding-left (left) to 20px,padding-right (right) to 30px,padding-top (upper) to 40px,padding-bottom (bottom) to 50px.

1. Padding Case CSS Code

<style>

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

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

</style>

2. Case HTML code

<div class= "DIV" >padding use case </div>

4. Case Summary

The padding is used to set styles within the object's four-sided border to the content area, so you can use CSS div + padding to implement intra-object spacing.

Iii. padding Abbreviations and cases

1, four-sided same padding shorthand

If the padding four-sided setting values are the same, if 5px, the original expression:

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

can be CSS shorthand for:

padding:5px;

2, four-sided different padding shorthand

As in our 2nd tutorial four different padding values, padding-left:20px;padding-right:30px;padding-top:40px;padding-bottom:50px

We can shorthand for:

padding:40px 30px 50px 20px;

Note that each value is separated by a space interval

Explain the meaning of the distinction

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

The second 30px stands for "right" padding-right:30px;

The third 50px stands for "under" padding-bottom:50px;

The fourth 20px stands for "left" padding-left:20px;

3, about the same, up and down different values padding shorthand

If padding is around 10px, 20px, 30px

General wording:

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

The shorthand can be:

padding:20px 10px 30px;

The first 20px of the former represents Padding-top on 20px,

The second 10px, representing Padding-left and padding-right around 10px

Third 30px, representing padding-bottom:30px

4, three sides same, side value is different

Any three sides of the same value, the other side is different we can still shorthand.

Exp

If the padding on the left and right 10px, the next 20px, this time generally write CSS style

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

Abbreviated as:

padding:10px;padding-bottom:20px

Note that the order can not be reversed, the use of the technique is that the browser reads from the top to the bottom, from left to right reading, so we can first set four sides of the same, followed by a different side of the style values can be.

Extended reading:

1, HTML compression optimization

2, CSS compression optimization

3. CSS Optimization

4. css Word spacing

Padding CSS Summary

Padding style is our use of high frequency CSS style properties, the general set of objects in the upper, lower, left, right margin interval we need to use the padding, of course, if you encounter the beginning of text indentation we can use CSS text-indent style. Use padding time notice width increase or decrease, padding is to occupy width and height, if the total width is 500px, left and right set 10px padding style, so the content area width will change to 480px. Also note that the abbreviation padding style when the meaning, as far as possible to use the CSS abbreviation sample

The use of padding is so much, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

In HTML p paragraph line Gao Xing how to set the distance

HTML5 <nav> tags how to use

HTML document type declaration how to write