View video tutorial

CSS Margin Side

CSS

It sets the spacing around the elements from any direction outside the border.

CSS Margin

➔ Margin can be set on each side of an element.

➔ The following properties specify the margin for each side of an element.

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

Example

.p1 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
Try it Now »

Click on the "Try it Now" button to see how it works.

Margin Auto

Set the width of the element and set the margin property to auto to center the element horizontally within the container.

Example

button {
  display: block;
  width: 120px;
  margin:auto;
  padding-top: 15px 20px 15px 20px;
  background-color: #128a00;
  color: white;
  font-size: 15px;
  border: 1px solid #000;
  border-radius: 5px;
}
Try it Now »

Click on the "Try it Now" button to see how it works.

CSS margin-top property

➔ The CSS margin-top property is used to specify the space above an element, outside its borders.

➔ This creates a buffer space above the top border of the element.

Syntax

margin-top: length | auto | initial | inherit;

Property values

Common Value Description
length CSS specifies a specific top margin using units of length (e.g., px, em, rem, cm). 0 is the default value.
percentage Specifies the top margin as a percentage of the width of the containing block.
auto The browser calculates the top margin automatically
initial Sets the property to its default value.
inherit The element inherits the property value from its parent element.

Example (top)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS margin-top Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
        .div0 {
            border: 1px solid red;
            display: inline-block;
            margin-top: 5px;
        }
        .div1 {
            border: 1px solid blue;
            display: block;
            margin-top: 10px;
        }
        .div2 {
            border: 1px solid green;
            display: block;
            margin-top: 40px;
        }
        img {
            border: 1px solid black;
            display: block;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <h3>CSS margin-top Example</h3>
    <hr>
    <p>margin-top is the space outside an element from its top border.</p>
    <p>Note: Here the blue element uses margin-top 10 pixels, the green element and img element uses margin-top 40
        pixels from their top border.</p>
    <div class="div0">
        <div class="div1">
            <div class="div2">
                <img src="resources/images/fruits-apple.png" width="100">
            </div>
        </div>
    </div>
</body>
</html>
Try it Now »

Copy the code and click on the "Try it Now" button to see how it works.

CSS margin-right property

➔ The CSS margin-right property is used to specify the space on the right outside the borders of an element.

➔ This creates a buffer space on the right side of the element's right border.

Syntax

margin-right: length | auto | initial | inherit;

Property values

Common Value Description
length CSS specifies a specific right margin using units of length (e.g., px, em, rem, cm). 0 is the default value.
percentage Specifies the right margin as a percentage of the width of the containing block.
auto The browser calculates the right margin automatically
initial Sets the property to its default value.
inherit The element inherits the property value from its parent element.

Example (right)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS margin-right Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
        .div0 {
            border: 1px solid red;
            display: inline-block;
            margin-right: 5px;
        }
        .div1 {
            border: 1px solid blue;
            display: block;
            margin-right: 10px;
        }
        .div2 {
            border: 1px solid green;
            display: block;
            margin-right: 40px;
        }
        img {
            border: 1px solid black;
            display: block;
            margin-right: 40px;
        }
    </style>
</head>
<body>
    <h3>CSS margin-right Example</h3>
    <hr>
    <p>The margin-right property specifies the right space outside the borders of an element.</p>
    <p>Note: Here the blue element uses a margin-right of 10 pixels, the green element and the img element use a margin-right of 40 pixels from their right border.</p>
    <div class="div0">
        <div class="div1">
            <div class="div2">
                <img src="resources/images/fruits-apple.png" width="100">
            </div>
        </div>
    </div>
</body>
</html>
Try it Now »

Copy the code and click on the "Try it Now" button to see how it works.

CSS margin-bottom property

➔ The CSS margin-bottom property is used to specify the space below an element, outside its borders.

➔ This creates a buffer space below the bottom border of the element.

Syntax

margin-bottom: length | auto | initial | inherit;

Property values

Common Value Description
length CSS specifies a specific bottom margin using units of length (e.g., px, em, rem, cm). 0 is the default value.
percentage Specifies the bottom margin as a percentage of the width of the containing block.
auto The browser calculates the bottom margin automatically
initial Sets the property to its default value.
inherit The element inherits the property value from its parent element.

Example (bottom)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS margin-bottom Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
        .div0 {
            border: 1px solid red;
            display: inline-block;
            margin-bottom: 5px;
        }
        .div1 {
            border: 1px solid blue;
            display: block;
            margin-bottom: 10px;
        }
        .div2 {
            border: 1px solid green;
            display: block;
            margin-bottom: 40px;
        }
        img {
            border: 1px solid black;
            display: block;
            margin-bottom: 40px;
        }
    </style>
</head>
<body>
    <h3>CSS margin-bottom Example</h3>
    <hr>
    <p>The margin-bottom property specifies the bottom space outside the borders of an element.</p>
    <p>Note: Here the blue element uses a margin-bottom of 10 pixels, the green element and the img element use a margin-bottom of 40 pixels from their bottom border.</p>
    <div class="div0">
        <div class="div1">
            <div class="div2">
                <img src="resources/images/fruits-apple.png" width="100">
            </div>
        </div>
    </div>
</body>
</html>
Try it Now »

Copy the code and click on the "Try it Now" button to see how it works.

CSS margin-left property

➔ The CSS margin-left property is used to specify the space on the left outside the borders of an element.

➔ This creates a buffer space on the left side of the element's left border.

Syntax

margin-left: length | auto | initial | inherit;

Property values

Common Value Description
length CSS specifies a specific left margin using units of length (e.g., px, em, rem, cm). 0 is the default value.
percentage Specifies the left margin as a percentage of the width of the containing block.
auto The browser calculates the left margin automatically
initial Sets the property to its default value.
inherit The element inherits the property value from its parent element.

Example (left)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS margin-left Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
        .div0 {
            border: 1px solid red;
            display: inline-block;
            margin-left: 5px;
        }
        .div1 {
            border: 1px solid blue;
            display: block;
            margin-left: 10px;
        }
        .div2 {
            border: 1px solid green;
            display: block;
            margin-left: 40px;
        }
        img {
            border: 1px solid black;
            display: block;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <h3>CSS margin-left Example</h3>
    <hr>
    <p>The margin-left property specifies the left space outside the borders of an element.</p>
    <p>Note: Here the blue element uses a margin-left of 10 pixels, the green element and the img element use a margin-left of 40 pixels from their left border.</p>
    <div class="div0">
        <div class="div1">
            <div class="div2">
                <img src="resources/images/fruits-apple.png" width="100">
            </div>
        </div>
    </div>
</body>
</html>
Try it Now »

Copy the code and click on the "Try it Now" button to see how it works.

Example (top, right, bottom, left)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS margin Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <style>
        .div0 {
            border: 1px solid red;
            display: inline-block;
            margin-top: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-left: 5px;
        }
        .div1 {
            border: 1px solid blue;
            display: block;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom:10px;
            margin-left: 10px;
        }
        .div2 {
            border: 1px solid green;
            display: block;
            margin-top: 40px;
            margin-right: 40px;
            margin-bottom:40px;
            margin-left: 40px;
        }
        img {
            border: 1px solid black;
            display: block;
            margin-top: 40px;
            margin-right: 40px;
            margin-bottom:40px;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <h3>CSS margin Example</h3>
    <hr>
    <p>The margin property specifies the space outside the borders of an element.</p>
    <p>Note: Here the blue element uses a margin of 10 pixels, the green element and the img element use a margin of 40 pixels from their border.</p>
    <div class="div0">
        <div class="div1">
            <div class="div2">
                <img src="resources/images/fruits-apple.png" width="100">
            </div>
        </div>
    </div>
</body>
</html>
Try it Now »

Copy the code and click on the "Try it Now" button to see how it works.

w3context w3context
  • An Online Learning Platform, Designed and developed by w3context team for all in the world who prefer reading and learning online content to develop their skills at their own time and pace.
  • Licensed w3context.
  • Version: v1.1.1.
Web Courses
Exercises
Projects
Community
©2025 w3context Terms of Use Privacy Policies Contact Us About Us