Margin in css

In this aticle we are going to learn about margin, left margin, right margin, top margin and bottom margin in css, how to give extra space between element margin and other elements margin according to our design.

We learnt about css in general learning what css can do in web pages, fonts in css, colors in css and background colors in css so, now we are going to learn about padding to give enough space between element margin and text.

Margin

We use margin in Cascading Style Sheets to give space between element margin and other elements margin, if we wand the element to be extra distance from other element margin we can use the margin to give us that extra space.

Left margin

Left margin gives space between element margin and other elements margin on the left side of the element that the left margin is applied to. So, we are going to create the element with 20px left margin style applied, copy and paste below code.

<div style="background: yellow; margin-left: 20px;">This is a div element with 20px left margin.</div>

So, we should have the following results.

This is a div element with 20px left margin.

Let us create element with no margin applied, copy and paste below code.

<div style="background: yellow;">This is a div element with no margin applied.</div>

So, we should have the following results.

This is a div element with no margin applied.

So, we can see that there is a difference between two elements with and without left margin, the element with left margin has extra space on the left while the element with no left margin has no space on the left of it.

Right margin

Right margin gives space between element margin and other elements margin on the right side of the element that the left margin is applied to. So, we are going to create the element with 20px right margin style applied, copy and paste below code.

<div style="background: yellow; margin-right: 20px;">This is a div element with 20px right margin.</div>

So, we should have the following results.

This is a div element with 20px right margin.

Top margin

Top margin gives space between element margin and other elements margin on the top side of the element the left margin is applied to. So, we are going to create the element with 20px top margin style applied, copy and paste below code.

<div style="background: yellow; margin-top: 20px;">This is a div element with 20px top margin.</div>

So, we should have the following results.

This is a div element with 20px top margin.

Bottom margin

Bottom margin gives space between element margin and other elements margin on the bottom side of the element the left margin is applied to. So, we are going to create the element with 20px bottom margin style applied, copy and paste below code.

<div style="background: yellow; margin-bottom: 20px;">This is a div element with 20px bottom margin.</div>

So, we should have the following results.

This is a div element with 20px bottom margin.

Margin to all sides

Margin to all sides gives extra space to all sides of the element that the margin style is applied to from other elements margin. So, we are going to create the element with 20px margin style applied to all the sides, copy and paste below code.

<div style="background: yellow; margin: 20px;">This is a div element with 20px margin to all sides.</div>

So, we should have the following results.

This is a div element with 20px margin to all sides.

Conclusion

In this article we learnt about margin, left margin, right margin, top margin and bottom margin in css, how to give extra space between element margin and other elements margin according to our design. with examples and we can notice that the element with margin style applied increases its distance from other elements margin due to applied margin style.