CSS Margins

❮ Prev Next ❯

The marginCSS property is commonly used in CSS to add space around an element.

Remember:

  • margin adds space outside an element border
  • padding adds space inside an element border

Specific margin properties

margin has 4 related properties that alter the margin of a single edge at once:

  • margin-top
  • margin-right
  • margin-botton
  • margin-left

The usage of those is very simple and cannot be confused, for example: 

p {
  margin-left :30px
  margin-right :3em
}

Using the margin shorthand

margin is a shorthand to specify multiple margins at the same time, and depending on the number of values entered, it behaves differently.

Using 1 value

Using a single value applies that to all the margins: top, right, bottom, left. 

p {
  margin :20px;
}

Using 2 value

Using 2 values applies the first to top & bottom, and the second to left & right. 

p {
  margin :20px 10px;
}

Using 3 value

Using 3 values applies the first to top, the second to left & right, the third to bottom. 

p {
  margin :20px 10px 30px;
}

Using 4 value

Using 4 values applies the first to top, the second to right, the third to left, the fourth to bottom 

p {
  margin :20px 10px 5px 0px;
}

So, the order is top-right-bottom-left.

Values accepted

margin accepts values expressed in any kind of length unit, the most common ones are px, em, rem.

It also accepts percentage values, and the special value auto.

Using auto to center elements

auto can be used to tell the browser to select automatically a margin, and it's most commonly used to center an element in this way: 

p {
  margin : 0 auto;
}

As said above, using 2 values applies the first to bottom & top, and the second to left & right

The modern way to center elements is to use Flex Box, and its justify-content: center;directive.

Older browsers of course do not implement Flexbox, and if you need to support them margin: 0 auto;is still a good choice.

Using a negative margin

margin is the only property related to sizing that can have a negative value. It's extremely useful, too. Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page.

If you don't set a color, the border by default is colored using the color of the text in the element.

A negative bottom margin moves up the elements after it.

A negative right margin makes the content of the element expand beyond its allowed content size.

A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page.

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        .value-1{
          border:2px solid blue;
          margin:30px;
        }
        .value-2{
          border:2px solid purple;
          margin:30px 20px;
        }
        .value-3{
          border:2px solid green;
          margin:30px 20px 10px;
        }
        .value-4{
          border:2px solid brown;
          margin:30px 20px 10px 0px;
        }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <div> 
        <h3>welcome to Coding Koleji </h3>
        <p class="value-1">1 value</p>
        <p class="value-2">2 value</p>
        <p class="value-3">3 value</p>
        <p class="value-4">4 value</p>
      </div>
    </body>
  </html>
❮ Prev Next ❯