Margin and padding properties that are easily confused

This time to bring you margin and padding easy to confuse attributes, margin and padding easy to confuse the attention of what, the following is the actual case, together to see.

In CSS, margin refers to the distance from its own border to the border of another container, which is the outer distance of the container. In CSS, padding refers to the distance between the inner border of another container within itself and the inside of the container.

Here are some common uses of padding and margin

First, padding

1. Grammatical structure

(1) padding-left:10px; Left margin

(2) padding-right:10px; Right inner margin

(3) padding-top:10px; Top padding

(4) padding-bottom:10px; Lower inner margin

(5) padding:10px; Four-sided unified inner margin

(6) padding:10px 20px; Top and bottom, left and right padding

(7) padding:10px 20px 30px; Top, left, and bottom padding

(8) padding:10px 20px 30px 40px; Top, right, bottom, left margins

2. Values that may be taken

(1) length specifies the amount of the inner margin of the specific unit record

(2)% the length of the padding based on the width of the parent element

(3) Auto Browser calculates the inner margin

(4) inherit specifies that the inner margin should be inherited from the parent element

3, browser compatibility issues

(1) All browsers support padding properties

(2) Any version IE does not support the attribute value "inherit"

Second, margin

1. Grammatical structure

(1) margin-left:10px; Left margin

(2) margin-right:10px; Right margin

(3) margin-top:10px; Top margin

(4) margin-bottom:10px; Lower margin

(5) margin:10px; Uniform margin of four edges

(6) margin:10px 20px; Top and bottom, left and right margins

(7) margin:10px 20px 30px; Top, left, bottom margin

(8) margin:10px 20px 30px 40px; Top, right, bottom, left margin

2. Values that may be taken

(1) length specifies the distance to be recorded for the specific unit

(2)% the length of the margin based on the width of the parent element

(3) Auto Browser calculates margin

(4) Inherit rules should inherit the margin from the parent element

3, browser compatibility issues

(1) All browsers support the margin attribute

(2) Any version IE does not support the attribute value "inherit"

The difference between margin and padding is shown as

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using CSS3 to realize the effect of projectile screen

How to omit CSS custom text

How the absolute positioning of CSS is compatible with all resolutions