Code360 powered by Coding Ninjas X Code360 powered by Coding Ninjas X
Table of contents
Margin Values
Margin - Individual Values
Frequently Asked Questions
Key Takeaways
Last Updated: Mar 27, 2024

CSS Margins

Author kabir singh
0 upvote
Basics of javascript
Free guided path
10 chapters
68+ problems
Earn badges and level up


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

Recommended Topic, Difference Between CSS and SCSS

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 :


Length Used 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.
Auto Allows the browser to decide the margin value.
Inherit This inherits the margin length from the parent element.



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!

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job

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:


margin-top Sets the margin of an element from the top
margin-bottom Sets the margin of an element from the bottom
margin-right Sets the margin of an element from the right
margin-left Sets the margin of an element from the left



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 Coding Ninjas Studio for more interview problems!


Happy Learning!


Previous article
CSS Spacing
Next article
Difference Between Margin and Padding
Guided path
Basics of javascript
10 chapters
68+ Problems
Earn badges and level up
Live masterclass