CSS Margin with Example - Scientech Easy

Margin in CSS is a white space around the block-level elements, outside of any defined borders. It is used to create a white space outside of an HTML element, between the elements and surrounding elements, or between the top or bottom of a webpage.

We can define margins at the top, right, bottom, and left of a block element. Margins are always transparent, meaning that they won’t have any background color as well as won’t affect the background of the element.

Generally, we define margin in pixels (px). However, we can also specify in percentage (%) or ems (em). Look at the below diagram of the CSS box model, in which we have defined margin at the top, bottom, left, and right.

In the above diagram of the CSS box model, the outermost white area represents the margin area that creates white space around the element, outside of any defined border. Margin area is not clickable.

The green area around the content represents padding area that creates a space between the content and its defined border. The central green area represents the actual content of the element. This diagram shows how we apply the margins at the top, bottom, left, and right of an element, creating transparent space around the entire element.

Syntax to Define Uniform Margin in CSS

CSS provides a margin property that we can use to set a uniform white space around an HTML element, outside any defined border. The general syntax to set a uniform margin for all four sides (top, right, bottom, and left) of a block element in CSS is as follows:

selector {
     margin: value;
}

Example 1:

div {
   margin: 20px;
}

In this example, we have set 20 pixels of uniform margin around all four sides of the <div> element.

Individual Margin Properties in CSS

With CSS, we have a full control over the margins. CSS provides four individual margin properties for specifying the margin for each side of an HTML element. The individual margin properties in the CSS to set margin for each side is as follows:

margin-top: Sets the margin on the top side of the element.
margin-right: Sets the margin on the right side of the element.
margin-bottom: Sets the margin on the bottom side of the element.
margin-left: Sets the margin on the left side of the element.

To set margin individually around each side of an HTML element, use the following syntax:

Selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

Example 2:

div {
   margin-top: 100px;
   margin-right: 120px;
   margin-bottom: 100px;
   margin-left: 80px;
}

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

Shorthand Margin Property

We can use the shorthand margin property to define different margin values around each side of a block element in one declaration. We can use a shorthand margin value to change all the margin at once. The values are specified in a clockwise order, starting from the top. The shorthand syntax to define margin in CSS is as:

Selector {
     margin: top right bottom left; /* Clockwise from the top */
}

The use of shorthand margin property reduces the amount of code, making it easier to read and maintain. It also saves space in the style sheet by combining multiple property values in a single declaration.

Using shorthand syntax, we can specify one, two, three, or four values for CSS margin property. Each value represents the margin for each side of an HTML element.

Setting Equal Margin for All Sides

If the margin property has one value, it will set equal margin on each side of a block element.

Example 3:

div {
   margin: 20px;
}

In this example, we have set 20 pixels of equal margin on the top, right, bottom, and left sides of <div> element. Look at the below complete HTML code.

<!DOCTYPE html>
<html lang>
<head>
     <title>Setting Equal Margin on Each Side</title>
<style>
div {
   color: white;
   margin: 30px;
   padding: 10px;
   background-color: red;
   border: 1px solid black;
}
</style>
</head>
<body>
    <div>
       This div element has a margin of 30 pixels on each side.
    </div>
</body>
</html>

Output:

In this example, we have set a margin of 30px and padding 10px for all sides of a <div> element.

Margin Property with Two Values

The margin shorthand property in CSS also supports two values. When you specify two values, the first value refers to the top and bottom sides, and the second value refers to the right and left sides. That is, the first one sets the top and bottom margins, while the second one sets the left and right margins.

Example 4:

p {
  margin: 30px 50px;
}

In this example, we have set the top and bottom margins to 30 pixels, and the left and right margins to 50 pixels around the paragraph <p> element. Always remember that the margin shorthand properties with two values always follow the convention top and bottom, right and left margins.

Margin Property with Three Values

The margin shorthand property supports to use three values. When you specify three values, the first one sets the top margin, the second one sets the left and right margins, and the third one sets the bottom margin. This shorthand notation is useful when you want the left and right margin values are the same while top and bottom margins are different.

Example 5:

p {
  margin: 30px 50px 70px;
}

In this example, the first value sets margin for the top side as usual, the second value sets the margins for both left and right sides, and the third value sets margin for the bottom side. Always remember that the shorthand margin properties with three values always follow the convention top, right and left, bottom in CSS.

Margin Property with Four Values

The shorthand margin property with four values represents the top, right, bottom, and left margins in this conventional order. You can use this shorthand margin property when you want to represent individual margin properties with different values in a single declaration for all four sides of an HTML element.

Example 6:

p {
  margin: 25px 50px 75px 100px;
}

Take note that you always specify the shorthand margin properties in a clockwise order, starting from the top: top, right, bottom, and left.

Let’s take an example in which we will use all four margin shorthand properties one by one and see the output.

Example 7:

<!DOCTYPE html>
<html>
<head>
    <title>Setting Different Margin on Each Side</title>
<style>
.para1 {
    color:white;
    margin: 20px;
    padding:10px;
    background-color: red;
    border: 1px solid black;
}
.para2 {
    color:white;
    margin: 20px 30px;
    padding:10px;
    background-color: green;
    border: 1px solid black;
}
.para3 {
    color:white;
    margin: 20px 30px 40px;
    padding:10px;
    background-color: blue;
    border: 1px solid black;
}
.para4 {
    color:white;
    margin: 20px 30px 40px 50px;
    padding:10px;
    background-color: gray;
    border: 1px solid black;
}
</style>
</head>
<body>
<p class="para1">
    This paragraph element has a top, bottom, left, and right margin of 20px.
</p>
<p class="para2">
    This paragraph element has a top and bottom margin of 20px, and a right and left margin of 30px.
</p>
<p class="para3">
    This paragraph element has a top margin of 20px, a right and left margin of 30px, and a bottom margin of 40px.
</p>
<p class="para4">
    This paragraph element has a top margin of 20px, a right margin of 30px, a bottom margin of 40px, and a left margin of 50px.
</p>
</body>
</html>

Output:

Values for Margin Property in CSS

Generally, the value of a margin property is specified using pixels in CSS. However, all the margin properties can also have the following values:

auto: the web browser calculates the margin.
length: Specifies a margin in units such as px (pixels), pt (points), cm (centimeters), etc.
percentage (%): Specifies a margin as a percentage of the width of the containing element.
inherit: Specifies that the margin should be inherited from the parent element.

Note that negative values for the margin properties are allowed in CSS.

Horizontally Centering Elements using auto Value

In CSS, the margin property has another useful function. You can use the margin property to horizontally center or align the block-level element within its container. To do so, you need to set the left and right margin properties to auto.

In order to center an element, you need to specify width of the element. Otherwise, it will take the entire width available to it. Then, the element will take up the specified width, and the remaining white space will be divided equally between the left and right margins.

Example 8:

div {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

In this example, the div element will be centered horizontally within its containing element. Let’s take a complete example based on it.

Example 9:

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin-left: auto;
   margin-right: auto;
   width: 50%;
   padding:15px;
   border: 1px solid red;
}
</style>
</head>
<body>
  <div>
     This div is horizontally centered within its containing element because of setting left-margin and right-margin to auto.
  </div>
</body>
</html>

Output:

An example of horizontally centered element by setting auto value.
Example 10:

<!DOCTYPE html>
<html>
<head>
    <title>Centering a Block-Level Element</title>
<style>
.container {
    width: 80%;
    height: 200px;
    background-color: lightgrey;
    border: 1px solid black;
    margin: 0 auto; /* Center the container */
}

.centered-element {
    width: 50%;
    height: 100px;
    background-color: lightblue;
    margin: 0 auto; /* Center the block element */
}
</style>
</head>
<body>
   <div class="container">
      <div class="centered-element">
         Centered Element
      </div>
   </div>
</body>
</html>

In this example, there is a div element with the class container to act as a containing element. Inside the container, there is another div with the class centered-element that will be centered horizontally.

Margin Property with Inherit Value

The value of the margin property is not inherited automatically in CSS. This means that if you set a margin on a parent element, the child elements will not automatically have the same margin. You need to specify the margin for each element that you want to use it for.

If you want a child element to inherit the margin value from its parent, you need to explicitly use the ‘inherit’ value. The inherit value used for the margin property specify that the margin should be inherited from the parent element. This means the child element will take the same margin values as its parent.

Example 11:

<!DOCTYPE html>
<html>
<head>
    <title>Margin Inheritance Example</title>
<style>
.parent {
    margin: 30px;
    padding: 10px;
    background-color: lightgrey;
}
.child {
  /* This margin is not automatically inherited from the parent */
     padding: 10px;
     background-color: lightblue;
}
.child-inherited {
     margin: inherit; /* Explicitly inherit the margin from the parent */
     padding:10px;
     background-color: lightgreen;
}
</style>
</head>
<body>
   <div class="parent">
       Parent Element
      <div class="child">
          Child Element without Inherited Margin
      </div>
      <div class="child-inherited">
           Child Element with Inherited Margin
      </div>
   </div>
</body>
</html>

Output:

An example of margin property with inherit value

In this example, we have a div element with the class parent. Inside the div element, there are two child div elements: one with the class child and another with the class child-inherited. The child element with class child will not automatically inherit the margin of parent element. Therefore, it will have no margin unless we specified.

On the other hand, the child element with class child-inherited will have the same 30px margin as the parent element because it uses the inherit value, which means it will inherit the 30px margin from the parent element.

Difference between Margin and Padding in CSS

Here’s a table that highlights the differences between margin and padding in CSS:

Feature	Margin	Padding
Definition	Margin is the white space outside the border of an element.	Padding is the space between the element’s content and its defined any border.
Work	Margin can still work an element whether or not it has borders.	Padding works only on elements that have borders.
Background Color	Margins are always transparent. Background color of an element will not extend into margin area.	Padding area have a background color. It inherits the background color of the element.
Collapsing	Adjacent vertical margins between elements can collapse into a single margin.	Padding does not collapse.
Properties	margin-top, margin-right, margin-bottom, margin-left, margin	padding-top, padding-right, padding-bottom, padding-left, padding
Usage	Used to create white space between elements.	Used to create white space between the element’s content and its border.
Negative Values	Negative values are allowed.	Negative values are not allowed.
Shorthand Syntax	margin: top right bottom left;	padding: top right bottom left;
Clickable	Margin area is not clickable.	On the other hand, padding area of an element is clickable.
Example	div { margin: 20px; /* Applies a 20px margin on all sides */ }	p { padding: 20px; /* Applies a 20px padding on all sides */ }