Android-padding/margin

This article briefly introduces the order and difference of the four values in the margin and padding attributes. The order of the four values in the margin and padding attributes is: Top right bottom left, which is listed clockwise.

 

Are you familiar with the differences between the margin and padding attributes? Here we will share with you a little bit. I believe this article will surely help you gain some benefits.

Order and difference of the four values in the margin and padding attributes

The sequence is as follows: upper right bottom left, 'margin-top', 'margin-right', 'margin-bottom ', and 'margin-left', which are listed clockwise.

Difference: margin and padding are the two most commonly used attributes for separating elements. In China, it seems like a mess of stuff like fill and fill in. In fact, margin refers to the distance outside the element boundary, and padding is the opposite, defines the distance within the element boundary.

Example:

1. Padding: 1px2px3px4px;
2. Margin: 5px6px7px8px;

Where do they represent?

The position sequence of 1px2px3px4px is top right bottom left

The 1234 bits represent the left at the right of the top, but in many cases you can also reduce them:

For example, if the bottom part of the top is 1px and the left and right sides are 2px, you can write it as padding: 1px2px;

For example, if the top is 1px and the left side is 2px and the bottom is 3px, you can write it as padding: 1px2px3px;

What is the difference between the margin attribute and the padding attribute?

◆ Margin attributes:

The margin attributes are divided into five attributes: margin-top, margin-right, margin-bottom, margin-left, and margin, respectively, indicating the distance between the content in the box and the border, its Attribute value is a numerical unit, which can be a length, percentage, auto, margin, or even a negative value, causing overlapping display between the box and the box. For details about the attributes of margin, see the following table:
Attribute name: 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left'
Property value:
Initial Value: 0
Target objects: All elements
Inherit?: No
Percentage remarks: the width relative to the box

For example:

1. H1 {margin-top: 2em}
2. H2. {margin-Right: 12.3%}

There is also a quick Writing Method for margin, that is, using the margin attribute directly, for example:

1. Body {margin: 1em2em3em2em}

Equivalent:

1. Body {
2. Margin-top: 1em;
3. Margin-Right: 2em;
4. Margin-bottom: 3em;
5. Margin-left: 2em;
6. }

The margin attribute can be followed by four values separated by spaces (remember not to use commas). The order is "upper right bottom left". Of course, there can be less than four values after margin, for example:

1. Body {margin: 2em}/* All margin values are set to 2em */
2. Body {margin: 1em2em}/* the upper and lower margin values are 1em, And the right left margin values are 2em */
3. Body {margin: 1em2em3em}/* the margin is 1em, the right left margin is 2em, and the lower margin is 3em */

◆ Padding attributes:

The padding attribute is used to describe how much space is inserted between the border and content of a box. It is similar to the margin attribute. It can also be divided into upper right lower left and a shortcut padding. For details about the attributes of margin, see the following table:
Attribute name: 'padding-top ', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
Property value:
Initial Value: 0
Target objects: All elements
Inherit?: No
Percentage remarks: the width relative to the box

For example:

1. BLOCKQUOTE {padding-top: 0.3em}

The padding attribute is omitted here, similar to the margin attribute.