Selected Reading
Q&A

CSS - Margins

Setting up a margin around an HTML element is one of the things that sets CSS so far above traditional web markup. This article will teach you CSS margin property and its constituent properties.

CSS Margin

The CSS margin property is a shorthand property to set the margin area around an HTML element. Consider you want to set a quarter-inch margin on h1 elements then following is the syntax:

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 0.25in; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has  quarter-inch margin around it!</h1>
   </div>
</body>
</html>

You can set margin using any units, whether in pixels, inches, millimeters, or ems. The default value for margin is 0 (zero), so if you don’t set a margin value then no margin should appear around the element. To set a margin of 20 pixels around h1 element, above code will be written as follows:

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has 20 pixels margin around it!</h1>
   </div>
</body>
</html>

CSS Margins - Single-Side Properties

CSS provides four separate properties to set margins for left, right, top and bottom for an element.

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

Following example demonstrates how we can set different margins around h1 elements:

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin-top: 20px; margin-right:40px; margin-bottom:10px;
      margin-left:0px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has different margins around it!</h1>
   </div>
</body>

CSS Margins - Shorthand Property

You can use margin property to set all the sides margin at different values. Following is the syntax to use margin as shorthand property:

h1 {margin: top right bottom left}

Here the value of top, right, bottom and left could be in pixels, inches, ems, or centimeters etc. So using the above syntax we can write our previous HTML code as follows:

<html>
<head>
<style>
   div{
      border:1px dotted
   }
   h1 {
      margin: 20px 40px 10px 0px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has different margins around it!</h1>
   </div>
</body>

CSS Margins - Set Three Values:

We can set margin at three values as 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. Following is the example. You should try to compare the output with previous example:

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px 40px 10px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has different margins around it!</h1>
   </div>
</body>

CSS Margins - Set Two Values:

We can set margin at two values as margin: 20px 40px, in this case top and bottom margins will be 20px, right and left margins will be 40px. Following is the example. You should try to compare the output with previous example:

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px 40px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with grey background!</h1>
   </div>
</body>

We have seen that setting a single value for margin, applies margin equally to all the sides - top, right, bottom and left. You can check very first example to understand this case.

CSS Margins - Mix up Units:

CSS allows to mix up the types of length value you use while specifying different margins in a shorthand property. You are not restricted to using a single length type in a given rule as shown below:

<html>
<head>
<style>
   div{
      border:1px dotted
   }
   h1 {
      margin: 20px 5em .5in 4ex; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with grey background!</h1>
   </div>
</body>

CSS Negative Margins

CSS allows to specify negative margins for an element. This will cause the element’s box to stick out of its parent or to overlap other elements.

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px 40px; background-color: #eee;
   }
   p {
      margin: -20px 40px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with grey background!</h1>
      <p>This paragraph has negative margin.</p>
   </div>
</body>
</html>

CSS Margins - Percentages

It is very much possible to set percentage values for the margins of an element. Percentage margins values are computed in relation to the width of the parent element’s content area, so they can change if the parent element’s width changes.

<html>
<head>
<style>
   h1 {
      margin:10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div style="width: 600px; border: 1px dotted;">
      <h1>An h1 element with grey background!</h1>
   </div>

   <div style="width: 400px; border: 1px dotted;">
      <h1>An h1 element with grey background!</h1>
   </div>;
</body>
</html>

CSS Margins - Inline Elements

Margins can also be applied to inline elements but top and bottom margins do not have any effect on the line height of these nonreplaced elements and these margins are always transparent. Though when you apply margins to the left and right sides of an inline nonreplaced element then it will show the effect as shown in the following example.

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   strong {
      margin-top: 25px; margin-bottom: 50px; 
      margin-left: 25px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
       <p>This text has some <strong>strong text</strong> with grey background</p>
   </div>

</body>
</html>

Here margin-left created some extra space before the highlited strong text. We can create same space before and after the element as follows:

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   strong {
     margin: 25px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
       <p>This text has some <strong>strong text</strong> with grey background</p>
   </div>

</body>
</html>

CSS Margins - Auto Value

In order to center an element inside its parent, use margin: 0 auto as shown in the following example:

<html>
<head>
<style>
   div {
      width:600px; border:1px dotted
   }
   h1 {
      margin:0 auto;
   }
</style>
</head>
<body>
   <div>
        <h1>An h1 element with center position!</h1>
   </div>

</body>
</html>

Though if you are using an old browser, then above code will not work and with modern browser, you should use the following code:

<html>
<head>
<style>
   div {
      width:600px; border:1px dotted
   }
   h1 { 
      display: flex; justify-content:center;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with center position!</h1>
   </div>

</body>
</html>

CSS Margins - Related Properties

Property	Description
margin	A shorthand property for setting all the margin properties in one declaration
margin-bottom	Sets the bottom margin of an element
margin-left	Sets the left margin of an element
margin-right	Sets the right margin of an element
margin-top	Sets the top margin of an element
margin-trim	Allows the container to trim the margins of its children

Kickstart Your Career

Get certified by completing the course

Get Started