CSS3 Margin

CSS3 margins property defines space around an element that is outside of defined borders. CSS3 gives you complete control over the margin.

There are separate properties for specifying margins for all the corners of an element such as top, right, bottom, and left.

CSS3 Margin Individual Sides

With CSS, we can specify margins for all the sides of an element:

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

All of the above-mentioned properties, accept the following values:

auto – the browser calculates margin on its own
length – defines margin in the standard units like px, pt, or cm.
% -specifies what % of the width of the containing element will the margin take?
inherit – instructs the browser to inherit margin from the parent element.

Example

Setting margin for all the four corners of an element.

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Margin
    </title>
    <style>
        div {
            background-color: navajowhite;
            border: 1px solid red;
            margin-top: 100px;
            margin-bottom: 200px;
            margin-left: 250px;
            margin-right: 150px;
        }
    </style>
</head>
<body>
    <h2>Defining Margin properties for all the sides of an element</h2>
    <div>
        This div element has top marign of 100px, right margin of 150px, bottom margin of 200px,
        and left margin of 250px
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

CSS3 Margin Shorthand Property

To shorten this code, you can define all the margin properties in one line. With CSS3 margin property, we can specify the following properties:

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

It is how we can define margin property.

margin: 13px 26px 39px 52px;

In the aforementioned code snippet:

top-margin is 13px
Right margin is 26px
Bottom margin is 39px
Left margin is 52px

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Margin
    </title>
    <style>
        div {
            background-color: paleturquoise;
            border: 1px solid grey;
            margin: 13px 26px 39px 52px;
        }
    </style>
</head>
<body>
    <h2>Short code for specifying margin</h2>
    <div>
        This div element has top margin of 13px, right margin of 26px, bottom margin of 39px,
        and left margin of 52px
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

If the CSS ‘’margin’ property has three values.

margin: 15px 30px 75px;

In the aforementioned example:

Top marign is 15px
Right and left margin is 30px
Bottom margin is 75px

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Margin
    </title>
    <style>
        div {
            background-color: turquoise;
            border: 1px solid tomato;
            margin: 15px 30px 75px;
        }
    </style>
</head>
<body>
    <h2>Margin property with 3 values</h2>
    <div>
        This div element has top margin of 15px, right and left margin of 30px, and bottom margin of 75px
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

Moreover, we can define CSS ‘margin’ property with two values.

margin: 75px 150px;

In the aforementioned code example:

Top and bottom margin is 75px.
Right and left margin is 150px.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Margin
    </title>
    <style>
        div {
            background-color: rgb(216, 191, 216);
            border: 1px solid rgb(205, 209, 196);
            margin: 75px 150px;
        }
    </style>
</head>
<body>
    <h2>Margin property with 2 values</h2>
    <div>
        This div element has top and bottom margin of 75px and right and left margin of 150px
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

Lastly, we can define the margin property with only one value.

margin:150px;

In the aforementioned example all the four margins are 150px.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: aquamarine;
            border: 1px solid yellowgreen;
            margin: 150px;
        }
    </style>
</head>
<body>
    <h2>Margin property with 1 values</h2>
    <div>
        This div element has top, right, bottom, and left margins of 150px
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

Auto Value for CSS3 Margin Property

You can assign the value ‘auto’ to margin property to horizontally center the element within its content. As a result, the element will occupy the defined width and the remaining width will be uniformly divided between left and right margins.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 250px;
            border: 1px solid blue;
            margin: auto;
        }
    </style>
</head>
<body>
    <h2>Auto value for margin property</h2>
    <div>
        This div element will be horizoontally centered because its margin is auto
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

The Inherit Value

In the below-mentioned example, <p> element will inherit the margin from <div> element.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 1px solid greenyellow;
            margin-top: 100px;
        }
        p.p1 {
            margin-top: auto;
        }
    </style>
</head>
<body>
    <h2>Use of inherit value for the margin proeprty</h2>
    <div>
        <p class="p1">In this example, paragraph element will inherit the margin value from its parent div element </p>
    </div>
</body>
</html>

The output of this code will be

CSS3 Margin

Previous Lesson

External Sources

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Next Lesson » « Previous Lesson