I'm new and looking for a way to code properly, and so i'm asking what should we choose between a one Margin and all 4 values, or 4 Margin (Top, Right, Bottom, Left). Is there a way faster or more proper to do it. Eventually if you know where to find guidelignes teaching how we should act in every situation of this kind, for clarity or code optimisation I'll be gratefull. Again I'm new so if my question is not correct I'm sorry. Thank you all.

CodePudding user response：

I think that it depends on what you are working on. Sometimes you will need to set all 4 margins, but sometimes you will only need to set a margin-top for example. If you are new and want to learn more, this is a great resource https://www.w3schools.com/w3css/w3css_margins.asp

Good luck!

CodePudding user response：

margin: 25px 50px 75px 100px;

This is the shortest possible way of setting different margins. This example will set top as 25px, right as 50px, bottom as 75px, and left as 100px. You should really look into the box model as it is one of the most or maybe the most important yet simple things: https://www.w3schools.com/css/css_boxmodel.asp

You can think of the left and top margins as the positions in x and y respectively.

CodePudding user response：

Writing the shorthand version of a property certainly keeps the lines of code less, which benefits in faster loading times, but this is not a good advantage over using multiple properties. The main advantage of using shorthand properties is readability.

Choosing whether to use the shorthand property or multiple properties depends entirely on the situation.

Lets assume that you want to add margin of 10px on top and bottom sides and 0px on left and right sides of an h1 element.

using the shorthand property:

h1 {
   margin: 10px 0;
}

With multiple properties, you would have to write:

h1 {
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 0;
   margin-right: 0;
}

As you can see is this situation, the shorthand property is better suited.