CSS Tutorial

margin: Specifies a shorthand property for setting the margin properties in one declaration.
margin-top: Specifies the top margin of an element.
margin-right: Specifies the right margin of an element.
margin-bottom: Specifies the bottom margin of an element.
margin-left: Specifies the left margin of an element.

CSS Margin: Example

<head>
   <style>
       p {
           margin: 30px;
           border: .5px dotted #ff6a00;
       }
   </style>
</head>
<body>
   <p>Hello! This is Text Paragraph with margin property.</p>
</body>

Output

Hello! This is Text Paragraph with margin property.

Margin Side Values

auto: The browser calculates the margin.
length: Define a margin in px, pt, cm, etc.
%: Define a margin in % of the width of the containing element.
inherit: Define the margin should be inherited from the parent element.
NOTE: NEGATIVE VALUES ARE ALLOWED IN MARGIN.

CSS margin-top

The CSS margin-top is used to define top margin of an element.

Example of margin-top

<head>
   <style>
       .mydiv {
           border: .5px solid green;
       }

       p {
           margin-top: 50px;
           min-height: 50px;
           min-width: 300px;
           color: #fff;
           background-color: #342223;
       }
   </style>
</head>
<body>
    <div class="mydiv">
        <p>Hello! This is Text Paragraph with margin-top property.
            Basically, This is the example of margin-right.</p>
    </div>
</body>

Output

Hello! This is Text Paragraph with margin-top property. Basically, This is the example of margin-top.

CSS margin-right

The CSS margin-right is used to define right margin of an element.

Example of margin-right

<head>
   <style>
       .mydiv {
           border: .5px solid green;
       }

       p {
           margin-right: 50px;
           min-height: 50px;
           min-width: 300px;
           color: #fff;
           background-color: #342223;
       }
   </style>
</head>
<body>
    <div class="mydiv">
        <p>Hello! This is Text Paragraph with margin-right property.
            Basically, This is the example of margin-right.</p>
    </div>
</body>

Output

Hello! This is Text Paragraph with margin-top property. Basically, This is the example of margin-right.

CSS margin-bottom

The CSS margin-bottom is used to define bottom margin of an element and the value in length (% or auto).

Example of margin-bottom

<head>
   <style>
       .mydiv {
           border: .5px solid green;
       }

       p {
           margin-bottom: 50px;
           min-height: 50px;
           min-width: 300px;
           color: #fff;
           background-color: #342223;
       }
   </style>
</head>
<body>
    <div class="mydiv">
        <p>Hello! This is Text Paragraph with margin-bottom property.
            Basically, This is the example of margin-bottom.</p>
    </div>
</body>

Output

Hello! This is Text Paragraph with margin-bottom property. Basically, This is the example of margin-bottom.

CSS margin-left

The CSS margin-left is used to define left margin of an element and the value in length (% or auto).

Example of margin-left

<head>
   <style>
       .mydiv {
           border: .5px solid green;
       }

       p {
           margin-left: 50px;
           min-height: 50px;
           min-width: 300px;
           color: #fff;
           background-color: #342223;
       }
   </style>
</head>
<body>
    <div class="mydiv">
        <p>Hello! This is Text Paragraph with margin-left property.
            Basically, This is the example of margin-left.</p>
    </div>
</body>

Output

Hello! This is Text Paragraph with margin-left property. Basically, This is the example of margin-left.

CSS margin - All in One

The CSS margin property is use to spacify margin for all in one. It is most used property for defining margin in CSS.

margin: 50px That means 50px margin from all side.
margin: 40px 50px That means 40px margin from top & bottom, 50px from left & right.
margin: 10px 20px 30px 40px That means 10px margin from top, 20px from right, 30px from bottom, and 40px margin from left.

← Previous Next →

CSS Tutorial

CSS Tutorials

CSS Margin

Margin Shorthand Property

CSS Margin: Example

Output

Margin Side Values

CSS margin-top

Example of margin-top

Output

CSS margin-right

Example of margin-right

Output

CSS margin-bottom

Example of margin-bottom

Output

CSS margin-left

Example of margin-left

Output

CSS margin - All in One

Related Topics

Related Topics

Policy & Disclosure

Popular

LifeStyle & Fun