Radu Radu - 28 days ago 20
CSS Question

CSS margin with multiple types

Sorry for this dumb question but
I found in a piece of code that looks like

margin-left: 150px;
margin-left: 8%;
margin-left: 7vw;


Can you please explain me who this work? which will be used?
Also can't we write something like:

margin-left: 150px, 8%, 7vm;


I think of this as a short version or something?
EDIT I was asking only about margin-left not about all the properties of margin :)

Answer

If you write this way:

 margin-left: 150px;
 margin-left: 8%;
 margin-left: 7vw;

only margin-left: 7vw; will be accepted because it will override margin-left: 150px; and margin-left: 8%; , margin-left, margin-right , margin-top , margin-bottom only accept a single value.

You could use shorthand for margin like:

margin: margin-top margin-right margin-bottom margin-left

example:

margin: 10px 15px 20px 5px;

So in this shorthand the last one 5px will set as margin left ,

There are two more ways for writing shorthand:

2 values:

margin: (margin-top + margin-bottom) (margin-left + margin-right)

example:

margin: 10px 20px

3 values: margin: (margin-top) (margin-left + margin-right) (margin-bottom)

example:

margin: 10px auto 20px