CSS Margin

  • Home -
  • Web Development
  • CSS
Previous
Next

CSS Margin

The CSS margin properties are used to create space around elements, outside of any defined borders. Negative values can be used to overlap content. With CSS, you have full control over the margins.

Top, bottom, left and right margin can be changed independently using separate properties. You can also change all properties at once by using shorthand margin property.

 

 

CSS Margin Properties

S. No. Property Descriptions
1 margin This property is used to set all the properties in one declaration.
2 margin-top Sets the top margin of an element
3 margin-right Sets the right margin of an element.
4 margin-bottom Sets the bottom margin of an element.
5 margin-left Sets the left margin of an element.

CSS Margin Values

All of the margin properties can have the following values:

S. No. Property Descriptions
1 auto This is used to allow a margin to be calculated by the browser.
2 length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
3 % It is used to define a margin in percent of the width of containing element.
4 inherit It specifies that the margin should be inherited from the parent element.

 

 Tips: You may also use negative values to overlap content.

Example:

Set different margins for all four sides of the <p> element:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 80px;
background-color: AliceBlue;
} 
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

Output:

The use of individual margin properties

This div element has a top margin of 50px, a right margin of 50px, a bottom margin of 100px, and a left margin of 80px.

 

 

Margin - Shorthand Property

To shorten the code, All the margin properties can be specified in one property. 

There are four types to specify the margin property. You can use one of them.

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

 

So, this is how it works:

If there are four values for the margin property:

  • margin: 25px 50px 75px 100px;

 

  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

 

Example

Use four values of the margin shorthand property:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: Aliceblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - Four values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>

Output

 

The margin shorthand property - Four values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.

 

If there are three values for the margin property:

  • margin: 25px 50px 75px;

 

  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px

 

Example

Use three values of the margin shorthand property:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px;
background-color: AliceBlue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - Three values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

Output

The margin shorthand property - Three values

This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.

 

If there are two values for the margin property:

  • margin: 25px 50px;

 

  • top and bottom margins are 25px
  • right and left margins are 50px

 

Example

Use two values of the margin shorthand property:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: AliceBlue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - Two values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>
</body>
</html>

Output

The margin shorthand property - Two values

This div element has a top and bottom margin of 25px, and a right and left margin of 50px.

 

 

If there are one values for the margin property:

  • margin: 25px;
  • all four margins are 25px

 

Example

Use one values of the margin shorthand property:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px;
background-color: AliceBlue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div> 

<hr>

</body>
</html>

 

Output

The margin shorthand property - One value

This div element has a top, bottom, left, and right margin of 25px.

 

Auto Value

You can set the margin property to auto to horizontally center the item within its container.

The element will then take up the specified width and the remaining space will be divided equally between the left and right margins.

Example

Use margin: auto

<!DOCTYPE html>
<html>
<head>
<style>
div {
width:300px;
margin: auto;
border: 2px solid Blue;
}
</style>
</head>
<body>

<h2>The use of margin:auto</h2>

<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div> This div will be horizontally centered because it has margin: auto; </div>
</body>
</html>

Output

The use of margin:auto

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

This div will be horizontally centered because it has margin: auto;

 

 

Inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

Example

Use of the inherit value:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1
{
margin-left: inherit;
}
</style>
</head>
<body>

<h2>The use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>
</body>
</html>

Output

The use of the inherit value

Let the left margin be inherited from the parent element:

This paragraph has an inherited left margin (from the div element).

 

Margin Collapse

Top and bottom margins of elements sometimes collapse into a single margin equal to the biggest of the two margins.

It doesn't occur on the left and right margins. Only top and bottom margins.

Example

Example of margin collapse

 <!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
} ​

h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>

​<h1>Heading 1</h1>
<h2>Heading 2</h2>

 </body>
</html>

Output

In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.

​

Heading 1

Heading 2

​​

 

In the above example, the <h1> element has a 50px bottom margin and the <h2> element has a 20px top margin.

Common sense would seem to suggest that a total of 70px (50px + 20px) would be the vertical margin between <h1> and <h2>. But because of the collapse of the margin, the actual margin ends up being 50px. 

 

Previous
Next

Course Reviews