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

This article introduces what is the principle of omitting margin parameters in CSS. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

The principle of omitting margin parameters in CSS

The margin property is used to set the outer margin of the four sides of the object. If all four parameters are provided, they will act on the four sides in the order of top-right-bottom-left, that is:

Margin: {toprightbottomleft;}

A good way to remember this pattern is that these four values start at the top of the element and surround the element clockwise. Values are always used in this order, so if you want to achieve the desired results, you must sort them correctly.

Why is it omitted?

Sometimes, the value entered for margin is a bit duplicate:

P {margin:0.25em1em0.25em1em;}

In order for lazy people to enter less annoying code (I don't know if this is the original intention, but there must be such lazy people), and perhaps more practically to reduce the number of bytes in CSS files, in order to reduce bandwidth consumption and save economic expenses, W3C members have come up with an easier alternative. Instead of repeatedly entering pairs of values, you can replace it with the following markup:

P {margin:0.25em1em;}

These two values are enough to replace the four values. How do you do that?

Ellipsis principle

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

1. If there is no right value, use Left instead.

two。 If there is no bottomvalue, 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 are given, the fourth is obtained by copying the second, and the third (bottom) is obtained by copying * (top). * if only one value is given, it will be copied to the other three.

If you prefer intuitive instructions, please see the illustration shown below.

To give you three examples, you should know better:

1.B {margin:10px;} and b {margin:10px10px10px10px;} 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 in your mind when writing CSS.

On the CSS margin parameter omission principle is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.