Margin property with three values


#1

Question

I tried giving margin three values and it worked, why?

Answer

As we know, the single declaration of margin can take one value and it will apply it to every side of the element; if we give it four different values, each one of them will relate to each side in clockwise order ( top, right, bottom left), and if we give the property two values CSS will account the first one to relate to top and bottom, and the second one to right and left. Yet, using three values works because CSS counts it as if the fourth value was the same as the second, therefore it is read as:

margin: top right/left bottom;

So, if we had this for an element:

margin:50px 20px 1px;

Right and left will have a margin of 20px each, which can be illustrated like this:

05%20PM