The principle of omitting the margin parameter in CSS

This article introduces the principle of margin parameter omitting in CSS. The margin attribute is used to set the margin of the four sides of the object. If all four parameters are provided, the top-right-bottom-left order is applied to the four sides.

Do you know the principle of omitting the margin parameter in CSS? Here we will share with you that there are four margin parameters in CSS. For details, see the following.

CSSThe principle of omitting the margin parameter in

The margin attribute is used to set the margin of the four sides of the object. If all four parameters are provided, the four sides are added in the order of Top-right-bottom-left, namely:

margin：{toprightbottomleft;}  

The good way to remember this pattern is that the four values start from the top of the element and circle the element clockwise. The values are always used in this order. Therefore, if you want the expected results, you must sort them correctly.

Why is it omitted?

Sometimes, the input value for margin is repeated:

1. p {margin: 0.25em1em0.25em1em ;}

To reduce the number of bytes of CSS files, to reduce bandwidth usage and reduce economic expenditure, w3c members come up with a simpler alternative. Instead of entering a pair of values repeatedly, they can replace it with the following mark:

1. p {margin: 0.25em1em ;}

How can we replace these two values?

Omitted Principle

CSS defines several steps to receive less than four margin parameters:

1. If no left value exists, use right instead.

2. If there is no bottom value, use top instead.

3. If there is no right value, use the top value instead.

In other words, if three values are assigned to margin, the fourth (left) is obtained by copying the second (right. If two values are given, the fourth value is obtained by the second copy, and the third value is obtained by the first copy (top. Finally, if only one value is given, it will be copied to the other three.

For more information, see the following illustration.

Here are three examples:

1. B {margin: 10px;} and B {margin: 10px10px10px;} are equivalent;

2. B {margin: 10px5px;} and B {margin: 10px5px10px5px;} are equivalent;

3. B {margin: 5px3px4px;} and B {margin: 5px3px4px3px;} are equivalent;

With the guidance of these principles, I think you should have a clearer idea of omitting parameters in the margin attribute when writing CSS!