Topics

CSS Margins

This tutorial teaches you how to adjust space around an element using CSS.

CSS Margin Properties

The CSS margin properties enable you to set the spacing around an element's box border (or the edge of the element's box in case it has no defined border).

The background color does not affect an element's margin as the background color is always transparent. However, in case the parent element has the background color, then it will be visible through its margin area.

Setting Margins for Individual Sides

The margins can be specified for an element's individual sides, such as top, right, left, and bottom, using the CSS margin-top, margin-right, margin-left, and margin-bottom properties. Let's understand how this works using the following example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Margin</title>
<style>
h1 {
    margin-top: 50px;
    margin-bottom: 100px;
  background-color:green;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}
  </style>
</head>
<body>
           <div style="border:1px solid red">
             <h1>Welcome to CSS Tutorial</h1>
             <p>I am a CSS Developer!</p>
          </div>
           
</body>

Try With Example

The following values can be used to specify the margin properties:

Length - margin is specified in px, em, rem, pt, cm, etc.
Auto - Margin is calculated by the browser.
% - defines a margin in percentage (%) of the containing element's width.
Inherit - defines that the margin should be inherited from the parent element.

Negative margins can also be specified on an element, e.g., margin: -10px;, margin: -5%;, etc.

The Margin Shorthand Property

The margin shorthand property is a property that lets you specify all margin properties within one property. The shortened code helps you avoid setting the margin of each side separately, i.e., margin-top, margin-right, margin-bottom, and margin-left. Let's understand how it works through the following example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Margin</title>
<style>
h1 {
    margin: 50px; /* apply to all four sides */
}
p {
    margin: 25px 75px; /* vertical | horizontal */
}
div {
    margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
    margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}
  </style>
</head>
<body>
           <div style="border:1px solid red">
             <h1>Welcome to CSS Tutorial</h1>
<hr>
             <p>I am a CSS Developer!</p>
          </div>
           
</body>

Try With Example

This shorthand note can take one, two, three, or four whitespaces separated values.

In case only one value is specified, then it is applied to all four sides.
In case two values are specified, then the first value applies to the top and bottom side, and the second value applies to the right and left side of the element's box.
In case three values are specified, the first value is applied to the top, the second value is applied to the right and left sides, and the last value is applied to the bottom.
In case four values are specified, then the values are applied to the top, right, bottom, and left side of the element's box, respectively, in the specified order.

It is advised to use the shorthand properties, as it enables you to avoid the extra typing and helps you save some time. It also helps in making your CSS code easy to follow and maintain.

Horizontal Centering with Auto Margins

A margin property's auto value tells the web browser to calculate the margin automatically. It is used to center an element horizontally within a larger container.

Let's consider the following example to understand how it works:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Margin</title>
<style>
div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}
  </style>
</head>
<body>
           <div style="border:1px solid red">
             <h1>Welcome to CSS Tutorial</h1>
             <p>I am a CSS Developer!</p>
          </div>
           
</body>
</html>

Try With Example

The above style rules let the <div> element take up 300 pixels of all the horizontal space available, and the remaining space will be equally divided between left and right margins.