In this article we will talk about css margin property in detail. Where and how can we use Margin property? Why is it used? You will find answers to all these questions in this post.
The CSS Margin Property is used to give space around an element or outside a border. In CSS you have full control of setting the margin.
All CSS Margin Property
You can use different properties for each side of an element in CSS.
1. margin-top: – It is used to set the top margin of an element.
2. margin-right: – It is used to define the right margin of an element.
3. margin-bottom: – It is used to set the bottom margin of an element.
4. margin-left: –The left margin of the element in this property is set.
Shorthand CSS Margin Property
Margin is used to declare all four properties of Margin (margin-top, margin-left, margin-bottom and margin-right) simultaneously. With this you can give different values for top, left, bottom and right margin in a line.
If 4 values are given in margin property
So this output will work like this.
right margin- 50px
bottom margin- 75px
left margin- 90px
If 3 values of margin property are given then like-margin: 10px 20px 30px;
Then the result will be as follows
top margin- 10px
right and left margin- 20px
bottom margin- 30px
If only 2 values of margin property are given like-margin: 10 px 20 px; So it will work like this: –
The top and bottom margin will be 10px.
The right and left margin will be 20 px.
If only one value of the margin property is specified, then all four margins (top margin, left margin, bottom and right margin) will be 20px.
CSS Margin property values
In CSS, you are given full control over the margin property so that you can set the margin according to your interest. You can give any of the values below.
margin: length | auto | initial | inherit;
lenth value – You can also specify margin in lenth values. In CSS the lenth value can be defined in px, pt, cm etc. For this the by default value is 0. You can also give negative values to the margin.
% value – The left margin is defined in% value according to the width of the container element.
auto value – Auto value is used in the margin to show an element with its container at the center horizonatally. The element will take the same width as specified. The remaining space is divided equally into left and right margins.
CSS Background Learn English
How to use CSS Color property-In English
Margin collapse value
Sometimes the top and bottom margins of an element collapse into a single margin. Which shows according to which is the highest in the given two margins. Margin collapse occurs only in the top and bottom margin. This does not happen in left and right margin.
What is CSS Selector and how is it used?
3 ways to insert CSS – how to add CSS to a webpage
How to use CSS Border Property – Complete information In English
This Heading has 30px margin from bottom
This Heading has60px margin from top
The bottom margin of H1 element is 30 px and the top margin of H2 element is 60 px. Generally, the total margin between H1 and H2 should be 90 px (30 px + 60 px). But due to margin-collapse there will be only 60 px margin between the two.
In this article you read about css margin property and its values. I hope you understand this well. If you are facing any kind of problem, then you can comment and ask.
My name is Sant Lal from Haryana India.I am a part time blogger and always share usefull information for visiter.I want to help people about blogging, SEO and making money. Aap mujhe support de aur jyada se jyada apne dosto ke sath share kre.