Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to analyze the order and differences of the four values in Margin and Padding attributes, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

The order and difference of four values in Margin and Padding attributes

The order is: upper right, lower left, 'margin-top',' margin-right', 'margin-bottom',' margin-left', are listed clockwise.

Difference: margin and padding are the two most commonly used attributes that separate elements, and they seem to be translated into things like filling and filling in a mess at home. In fact, margin refers to the distance outside the boundary of the element, while padding defines the distance within the boundary of the element.

For example:

Padding:1px2px3px4px; margin:5px6px7px8px

What positions do they represent respectively?

The position order of 1px2px3px4px is top, right, bottom, left.

One, two, three and four represent the top, the right, the bottom and the left, but in many cases you can also cut down:

For example, when the top and bottom genera are all 1px and the left and right sides are 2px, you can write it as padding:1px2px.

For example, if the top is 1px, the left and right sides are 2px, and the bottom is 3px, you can write padding:1px2px3px.

What is the difference between the Margin property and the Padding property?

◆ Margin attribute:

The Margin attribute is divided into five attributes: margin-top, margin-right, margin-bottom, margin-left and Edge, which respectively represent the distance of the content in the BOX from the border. Its attribute value is a numerical unit, which can be length, percentage or auto,margin or even set to a negative value, resulting in overlapping display between BOX and BOX. For more information on margin attributes, please see the following table:

Attribute name: 'margin-top',' margin-right', 'margin-bottom',' margin-left'

Attribute value:

Initial value: 0

Fit objects: all elements

Whether to inherit: no

Percentage remarks: width relative to BOX

For example:

H1 {margin-top:2em} H2 {margin-right:12.3%}

Another quick way to write Margin is to use the margin attribute directly, such as:

BODY {margin:1em2em3em2em}

Equivalent to:

BODY {margin-top:1em; margin-right:2em; margin-bottom:3em; margin-left:2em;}

The margin attribute can be followed by four values, separated by a space (remember not a comma), in the order of "top, right, bottom, left", although there can be less than four values after the margin, for example:

BODY {margin:2em} / * all margin are set to 2em*/ BODY {margin:1em2em} / * up and down margin is 1em, right left is 2em*/ BODY {margin:1em2em3em} / * upper margin is 1em, right left margin is 2em, bottom margin is 3em*/

◆ Padding attribute:

The Padding attribute is used to describe how much space is inserted between the border and the content of the BOX. Similar to the margin attribute, it is also divided into the top, right, bottom, left and a shortcut padding. The attributes of margin are shown in the following table:

Attribute name: 'padding-top',' padding-right', 'padding-bottom',' padding-left', 'padding'

Attribute value:

Initial value: 0

Fit objects: all elements

Whether to inherit: no

Percentage remarks: width relative to BOX

For example:

BLOCKQUOTE {padding-top:0.3em}

The padding attribute is similar to margin, omitted here.

After reading the above, do you have any further understanding of how to analyze the order and difference of the four values in the Margin and Padding properties? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.