Languages
[Edit]
EN

CSS - margin

0 points
Created by:
Isaiah89
361

In this article, we would like to show you how to add margin using CSS.

Quick solution:

div {
  margin: 5px;
}

or

div {
  margin: 5px 10px 15px 20px;
}

Additionally, margin property can have the following values:

  • auto - tells the browser to automatically calculate¬†the margin,
  • inherit -¬†inherits¬†the margin from the parent element.

The margin can also be specified in:

  • units such as px, em,¬†pt, cm, etc.
  • %¬†- that specifies the¬†margin in % of the width of the containing element.

Note:

The margin property can be also set to a negative value.

 

Practical example

In this example, we set the margin to 5px in every direction using a single value.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      display: flex;
    }
    
    .default {
      height: 100px;
      width: 100px;
      background: #28a745;
      border: 2px solid #1f7132;
      border-radius: 10px;
    }

    .my-element {
      height: 100px;
      width: 100px;
      background: orange;
      border: 2px solid #af7100;
      border-radius: 10px;

      margin: 5px;  /* 5px in every direction */
    }

  </style>
</head>
<body>
  <div class="default"></div>
    <div class="my-element"></div>
  <div class="default"></div>
</body>
</html>

Specify margin for each side of the element

In this section, we specify individual values for each side of the div element.

div {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      display: flex;
    }

    .default {
      height: 100px;
      width: 100px;
      background: #28a745;
      border: 2px solid #1f7132;
      border-radius: 10px;
    }

    .my-element {
      height: 100px;
      width: 100px;
      background: orange;
      border: 2px solid #af7100;
      border-radius: 10px;

      /* margins */
      margin-top: 5px;
      margin-right: 3px;
      margin-bottom: 0px;
      margin-left: 20px;

    }

  </style>
</head>
<body>
  <div class="default"></div>
    <div class="my-element"></div>
  <div class="default"></div>
</body>
</html>

Shorthand:

.my-element {
  margin: 5px 3px 0 20px;  /* margin: top right bottom left;  */
}

Note:

The shorthand for margin property is specified clockwise.

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      display: flex;
    }

    .default {
      height: 100px;
      width: 100px;
      background: #28a745;
      border: 2px solid #1f7132;
      border-radius: 10px;
    }

    .my-element {
      height: 100px;
      width: 100px;
      background: orange;
      border: 2px solid #af7100;
      border-radius: 10px;

      margin: 5px 3px 0 20px;  /* top: 5px, right: 3px, bottom: 0px, left: 20px */
    }

  </style>
</head>
<body>
  <div class="default"></div>
    <div class="my-element"></div>
  <div class="default"></div>
</body>
</html>
Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join