CSS Margin

When designing a web page, it is sometimes necessary to define the outer space at the edges of the HTML element, and this is possible with the help of the margin property of CSS. The concept of margin in CSS is used to define a completely transparent outer space, that is, without background color for your elements. Therefore, it can be said that it is an essential property provided by CSS. In this chapter, you will learn about the various features available with the concept of margin.

Margin Property in CSS

With the help of CSS, it is possible to have full control over the margin feature for any HTML element. Different properties are available that can be used to set the margins for all sides of any HTML element. The margin value implemented within CSS should have to be either of the following:

  1. An automatic, i.e., auto value where your browser will calculate the margin for you
  2. A percentage value (specify the width of containing element)
  3. A Length (px, pt, cm, etc.)
  4. A word inherit (margin value can be inherited from parent element)

It should be noted that negative values ​​are also allowed. Here is a list of CSS properties that are implemented to provide margins on HTML elements.

CSS PropertyDescription
marginThe CSS margin property is used as shorthand for its different properties as a single declaration.
margin-topThe CSS margin-top is used to indicate the top margin for your element.
margin-rightThe CSS margin-right is used to indicate the right margin for your element.
margin-bottomThe CSS margin-bottom is used to indicate the bottom margin for your element.
margin-leftThe CSS margin-left is used to indicate the left margin for your element.

Here is a sample code snippet showing the implementation of all four (top, right, bottom, and left) CSS margin properties:

Example:
<style>
    selector {
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-left: 20px;
    }
</style>

Shorthand Margin Property

For shortening your CSS, it is probable for specifying all four (top, right, bottom, and left) margin properties under a single property. The margin property, as discussed above, is the individual margin properties. To use shorthand, you must use the margin property, which includes four other margin properties.

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        .main_container {
            border: 1px solid #eee;
            width: 100%;
        }
        
        h2 {
            margin: 30px 40px 65px 90px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="main_container">
        <h2>Margin shorthand property</h2>
    </div>

    <div>The concept of margin in CSS is used to define a completely transparent outer space, that is, without background color for your elements.</div>

</body>
</html>

So, let's look at the example above to see how shorthand margin property works:

In case you have margin properties with four values:

  • top margin is 30px
  • right margin is 40px
  • bottom margin is 65px
  • left margin is 90px

When padding margin property has three values:

  • top margin is 30px
  • right and left margins are 40px
  • bottom margin is 65px

When padding margin property has two values:

  • top and bottom margins are 30px
  • right and left margins are 40px

When padding margin property has one value:

  • all the four margins are 30px

Margin Value auto

The CSS margin value auto is used to center HTML elements horizontally in its container. It can be implemented like this:

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        .main_container {
            border: 1px solid #eee;
            width: 100%;
            padding: 10px;
        }
        
        .inside_container {
            margin: auto;
            width: 300px;
            background-color: powderblue;
        }
        
        h2 {
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="main_container">
        <div class="inside_container">
            <h2>Margin shorthand property</h2>
        </div>
    </div>

    <div>The CSS margin value auto is used to center HTML elements horizontally in its container.</div>

</body>
</html>

Margin Value inherit

It is also possible to inherit margin values ​​from the parent element to child elements. This is how it can be implemented:

Example:
<!DOCTYPE html>
<html>

<head>

    <style>
        div {
            border: 1px solid aqua;
            margin-left: 200px;
        }
        
        p {
            margin-left: inherit;
        }
    </style>

</head>

<body>

    <h3>Inherit margin value example</h3>
    Here it goes
        <div>
            <p class="class1"> It is also possible to inherit margin values ​​from the parent element to child elements. </p>
        </div>

</body>
</html>

Difference Between CSS Padding and Margin

The CSS margin is almost identical to the CSS padding attribute except for one significant difference: a margin defines the white space around the edge of the HTML element. In contrast, padding refers to white space within the element boundary.


Scroll Back to Top