Welcome to the CSS tutorial, and today we will talk about the CSS margin shorthand property. We have already covered CSS margins and other properties like margin-left, margin-right, margin-top, and margin-bottom. The point in discussing CSS margin shorthand is that it can be used to declare above said properties in just a single declaration.
CSS margin shorthand- definition
The CSS margin shorthand property will set all or specified margin properties in one declaration. The margin shorthand will save you:
- Line of codes, which is easy to monitor.
- Time that you will spend writing the multi-line codes.
Syntax
The margin shorthand syntax is easy to remember:
margin: value; (here, value can be any relevant values in px, percent or auto.)
Let’s say for example, if you wish to use fixed value, then you can:
margin: 45px;
or
margin: 45cm;
Note: Unlike CSS padding shorthand, you can have a negative value.
CSS Margin Shorthand – How you can use?
You can use the margin shorthand property in to different ways:
- Set all different values – You can set all the margin properties, like margin: 20px 10px 30px 40px. Here we have set the values for the top, right, bottom, and left margin.
- Set two different values – You can set two values in the pair, like margin: 20px 10px; Here we have set the values for the top, bottom to 20px and left, right to 10px.
- Set three sides value – You can set two different values for two different margins, and a value for the pair of the margin, like margin:20px 30px 10px; Here the first value resembles a top, and 30px is for the left and right margin, and the last one for the bottom margin.
- Set all same values – You can use this CSS margin shorthand to set the margin equally same for the top, right, bottom and left, like margin: 20px;
CSS Margin Shorthand – Values
- Auto – Leave everything for browsers, they will set the top margin.
- Fixed length – You can use this value (px, pt, or cm), if you want to create a fixed top margin for your element.
- Inherit – You can use this value, if you want to inherit any of the previous element values.
- Percentage – You can use this value to set the top margin in the percent (%).
Note: You can use the default values (0) as well.
CSS Margin Shorthand – Example
Now, like our other tutorials, we will try to understand the margin shorthand property with the practical example. In the below example, we have taken three different values, one h2 tag has all different side margin, and other two have two different margins and with no margins. Let’s see what will happen when you will run this code:
<html> <head> </head> <body> <h2 style="margin: 40px 220px 50px 60px; border:5px solid red;"> This Sub-heading is with all different margin values </h2> <h2 style="margin: 140px 20px; border:5px solid blue;"> This Sub-heading is with two different margin values </h2> <h2 style="margin: 0px; border:5px solid green;"> This Sub-heading is without the margin </h2> </body> </html>
The output for the above code will be:
We can see the outputs in different colors red, blue and green. The red one is having all different margin values, blue one will have two different values, and the last one is having the all sides equal. Here we have used the default one.
Conclusion
We have just covered the CSS margin shorthand property, and its example. The plus point with this CSS margin shorthand property is you can easily declare the values in one line. But to newcomers we will recommend them to go through the other CSS margin properties. It will sharp your knowledge, and we all probably know that the basics are a foundation for the learning.
What next? Next we will see how we can use CSS margin bottom?
If you liked our content on the CSS margin shorthand property, then share it with your friends or like us on the Facebook or tweet for us. In case, you want to share or ask anything relevant to the CSS or this CSS margin shorthand tutorial, then feel free to contact us. Just spread our thought “Sharp the world | Educate Yourself”, and this is what we are doing for our dear readers.