CSS Margins

Introduction

The CSS margin properties are utilized to make space around components outside of any characterized borders.

 

They can be set using specified lengthspercentages, or keywords like “auto” and can also end up having negative values as well.

 

Programming in CSS, we get a healthy control over the margins, and we can quickly end up hard coding the margin lengths of each side using assigned properties like ‘top’‘right’‘left’'bottom.'

 

Let's first see what the margin values in CSS are

Margin Values

 

The first way of assigning margin values comes from the fundamental margin shorthand property, where we can directly give the four margin values.

 

Example 1 : 

 

A {
  margin: 35px 60px 25px 100px;
}

 

The four values assigned in the example have the following structures :

  • 35px for the Top Margin
  • 60px for the Right Margin
  • 25px for the Bottom Margin
  • 100px for the Left Margin

 

Example 2 :

 

Considering the example mentioned above, we can also have a situation where we have only three values assigned. How does that work? Let's have a look!

 

A {
  margin: 35px 60px 25px ;
}

 

The three values assigned in the example have the following structures :

  • 35px for the Top Margin
  • 60px for the Right and Left Margin
  • 25px for the Bottom Margin

 

Example 3 :

 

Three values were easy to understand, but what if we have only two assigned? Sounds a little interesting! Let's see how the two values will be taken into consideration.

 

A {
  margin: 35px 60px ;
}

 

The two values assigned in the example have the following structures :

  • 35px for the Top and Bottom Margin
  • 60px for the Right and Left Margin

 

Example 4 :

 

Final Task! Now we have only one value assigned! This would be easy to understand, considering that you read the first three examples correctly. Have a look at the code.

 

A {
  margin: 35px ;
}

 

The value assigned in the example has the following structure :

  • 35px for all the margins now. (Top, Right, Left, Bottom)

 

Now we have a total of 4 ways that we can use to assign the margin values in our CSS sheet. The four ways are explained below :

 

VALUEDESCRIPTION
LengthUsed to hardcode the margin taking values in px,pt,cm etc. The default value is 0px.
Percentage (%)Used to specify the margin length using the percent of the width of the parent elements.
AutoAllows the browser to decide the margin value.
InheritThis inherits the margin length from the parent element.

Example

 

A {
margin: 10%;   /* All sides are assigned 10% margin */


margin: 100px; /* All sides are assigned 100px margin */


margin: 1.7em 70px; /* top and bottom are assigned 1.7em margin */
                    /* left and right are assigned 70px margin  */


margin: 100px 9% -7em;   /* top is assigned 100px margin */
                       /* left and right are assigned 9% margin */
                       /* bottom are assigned -7em margin */
margin: 9em auto; /* top and bottom are assigned 9em margin */
                 /* Box is centered horizontally*/


margin: auto; /* top and bottom are assigned 0 margin */
             /* Box is centered horizontally */


}

 

Let’s discuss some of the properties of the individual sides of margins and understand how they work!

Margin - Individual Values

So when we hard code one of the sides of our sheet, then we again have four types in hand, and the four types are : 

  • margin-top 
  • margin-bottom
  • margin-right
  • margin-left

These individual properties have the following characteristics:

 

PROPERTYDESCRIPTION
margin-topSets the margin of an element from the top
margin-bottomSets the margin of an element from the bottom
margin-rightSets the margin of an element from the right
margin-leftSets the margin of an element from the left

 

Example

Setting the margin for all the four sides of our <A> element would be something like this : 

 

A {
  margin-top: 35px ;
  margin-right: 25px ;
  margin-left: 95px ;
  margin-bottom: 100px ;
}

 

Now, if you have read till here, Kudos! You have a brief knowledge about the Margins in CSS, and you can finally adjust the margin lengths of your pages using the properties mentioned.

But we aren’t done yet! 

Let’s see some questions that are frequently asked on the same topic!

Frequently Asked Questions

 

  1. How can we define the CSS margin property?

 

Answer - A transparent space without any border color that can be provided to the elements and can help us create a boundary around them is defined as CSS Margin.

 

2. What is auto in CSS?

 

Answer - Whenever we tend to adjust something in CSS automatically, we use “Auto” also, we generally use auto to align an element to the center of our page. 

E.g., margin0 auto;

 

3. How can you remove all the margins in your CSS code?

 

Answer - we can easily remove all the margins by hard coding the margin length to be 0, and we can do this in the given way :

 

{

margin 0;

}

 

4. What is the difference between margin and padding?

 

Answer - when we provide some space to the outer side of our element, it can be stated as a margin. In contrast, when you offer a similar space inside the element, i.e., inside the border of our element, it is called padding.

 

Key Takeaways

 

Starting as a newbie, we read about the margins in CSS, but that wasn't enough, and this blog tells you about the different types of ways in which you can specify the margins in CSS.

 

Also, we get a fair knowledge about the types of individual margin values that help us to assign the topbottomright, and left margin values individually.

 

Liked this blog? And want to solve some interview questions for CSS? Here is a blog for you! Please have a look and also visit our platform CodeStudio for more interview problems!

 

Happy Learning!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think