CSS - Margin

In CSS, Margins are used to create space around outer part of an element. In this tutorial we will learn how to add different types of margins to HTML elements and properties associated with it.

What is CSS Margin?

A Margin in CSS make layout visually appealing by adding extra space between elements.
You can set margin for individual sides using properties margin-bottom, margin-top, margin-left and margin-right
Negative Margin: A margin with negative value indicate the elements overlap with each other.

CSS Margins Example

You can try different ways to use to create margins in the below section and you can change the values as well.

margin: 1em

margin: 10px 0

margin: 10px 50px 20px

margin: 10px 50px 20px 40px

margin: 30px

Try Different Margin Options

Define Margin
Margin Individual Sides
Different Ways to Apply Margin

Margin Percentage Values
Margin Mix up Units
Margin Properties Reference

Define Margin

To define any margin on any HTML element you can use CSS margin property, this property is shorthand property of 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left' properties. A single value will generate margin all around the element.

Syntax

margin: "value";

Example

As you can see in this below example we have made a 10px and 20px margin surrounding the paragraph element and highlight the margin area with light-green background.

<!DOCTYPE html>
<html>

<head>
    <title>CSS Margin</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>Tutorialspoint</h1>
    <h3>CSS Margin</h3>
    <div>
        <div style="margin: 20px; background: white;">
            CSS Margin 20px all sides
        </div>
        <hr color="blue">
        <div style="margin: 10px; background: white;">
            CSS Margin 10px all sides
        </div>
    </div>
</body>

</html>

Margin Individual Sides

As we have mentioned earlier the margin is shorthand property for all Individual sides margin. You can set different margin values for top, right, bottom and left sides.

margin-top: This property is used to set the margin top on any element.
margin-right: This property is used to set the margin right on any element.
margin-bottom: This property is used to set the margin bottom on any element.
margin-left: This property is used to set the margin left on any element.

You can check the attached image for more clarity on individual side margins.

Syntax

margin-top: "value";
margin-right: "value";
margin-bottom: "value";
margin-left: "value";

Example

In this example we have create 4 different element and generated margin on each element's individual sides with the above mentioned properties.

<!DOCTYPE html>
<html>

<head>
    <title>CSS Margin</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }
        
        p {
            background-color: lightgreen;
            border: 1px solid black;
            
        }
        span {
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>Tutoriaslpoint</h1>
    <h3>CSS Margin</h3>
    <div>
        <p style="margin-top: 15px;">
            <span>CSS Margin Top Applied on Paragraph Element</span>
        </p>
        <hr>
        <p style="margin-right: 15px;">
            <span>CSS Margin Right Applied on Paragraph Element</span>
        </p>
        <hr>
        <p style="margin-bottom: 15px;">
            <span>CSS Margin Bottom Applied on Paragraph Element</span>
        </p>
        <hr>
        <p style="margin-left: 15px;">
            <span>CSS Margin Left Applied on Paragraph Element</span>
        </p>
    </div>
    
</body>

</html>

All the left over space on the right side of the element can be confusing to identify the margin, if you try on your own by changing values it will clear the margin concept. And always remember negative values are not allowed for margin in CSS.

Different Ways to Apply Margin on HTML Elements

There are four ways to provide value to the CSS margin property all of them are mentioned and described bellow with the complete example code.

Single Values: Here you can provide a single value to the margin property that same value will be applicable on four sides of the the element.
Two Values: Here you have to provide two values that will be used as top, bottom and right, left margin value.
Three Values: In this way you can provide three values that will define top, left, right and bottom value. Like if you set margin: 20px 40px 10px. In this case top margin will be 20px, right and left margins will be 40px and bottom margin will be 10px.
Four Values: If you provide four values to the margin property it will generate top margin from first value, right margin from 2nd value and so on.

Syntax

margin: "value" // Single Value
margin: "value value" // Two Values
margin: "value value value" // Three Values
margin: "value value value value" // Four Values

Example

In this following example we have crated a four different element and used inline css to generate margin around the element in different ways.

<!DOCTYPE html>
<html>

<head>
    <title>CSS Margin</title>
    <style>
        div{
            background-color: lightgray;
            border: 1px solid black;
        }
        
        p {
            background-color: lightgreen;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>Tutoriaslpoint</h1>
    <h3>CSS Margin</h3>
    <div>
        <p style="margin: 20px">
            <span>Margin property with Single Value</span>
        </p>
        <hr/>
        <p style="margin: 10px 20px">
            <span>Margin property with two Values</span>
        </p>
        <hr/>
        <p style="margin: 10px 15px 20px">
            <span>Margin property with three Values</span>
        </p>
        <hr/>
        <p style="margin: 5px 10px 15px 20px">
            <span>Margin property with four Values</span>
        </p>
    </div>
    
</body>

</html>

Margin Mix up Units

CSS does not restrict usage of multiple units for specifying the values of margin, while specifying in shorthand property. That means one can pass values of length as pixel along with ems or inches, etc.

Syntax

h2 {
    margin: 20px 4ex .5in 3em; 
}

Example

In this following example we will provide 4 values on margin property but each value will be mentioned in different units..

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 2px solid;
        }
        h2 {
            margin: 20px 4ex .5in 3em; 
            background-color: silver;
        }
    </style>
</head>

<body>
    <div>
        <h2>
            The different length units are passed 
            as margin values to the h2 element.
        </h2>
    </div>
</body>
</html>

Margin Percentage Values

Margin property can have a percentage value passed, as CSS allows it. Percentages are calculated in relation to the width of the parent element’s content area.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            border: 2px solid;
        }
        p {
            margin: 10%; 
            background-color: silver;
        }
    </style>
</head>

<body>
    <div>
        <p>
            The margin defined for p element is    
            10%which is calculated as 10% of width
            of parent element(div), which means
            it is 10% of 300px and that is 30px.
        </p>
    </div>
</body>
</html>

Margin Auto and Inherit Value

The property value margin: auto is used to center an element horizontally.

The property value margin: inherit is used to inherit same margin as parent element.

Example

In this example we will discuss auto and inherit value for margin

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 200px;
            margin: auto;
            background-color: lightgray;
        }
        p {
            margin-left: 20px;
            border: 2px solid black;
            padding: 10px
        }
        span{
            background-color: silver;
            border: 2px solid black; 
            margin-left: inherit;
        }
    </style>
</head>

<body>
    <h2>Margin Auto</h2>
    <div>
        A div element centered using margin: auto;
    </div>

    <h2>Margin Inherit</h2>
    <p>
        Some texts..<span>The span tag uses 
        same margin as parent paragraph</span>
    </p>
</body>
</html>

Margin Properties Reference

You can explore more examples on margin properties by visiting the sub topics listed in the following table:

Property	Description	Example
margin	A shorthand property that is used for setting all the margin properties in one declaration.	Try It
margin-top	Sets the top margin of an element.	Try It
margin-right	Sets the right margin of an element.	Try It
margin-bottom	Sets the bottom margin of an element.	Try It
margin-left	Sets the left margin of an element.	Try It

Print Page

CSS - Margin

What is CSS Margin?

CSS Margins Example

Table of Contents

Define Margin

Syntax

Example

Margin Individual Sides

Syntax

Example

Different Ways to Apply Margin on HTML Elements

Syntax

Example

Margin Mix up Units

Syntax

Example

Margin Percentage Values

Example

Margin Auto and Inherit Value

Example

Margin Properties Reference