CSS Properties

Margin

The CSS property margin can be used to create space around an element's border and its surrounding elements. The value of this property can be specified using any of the length unit specification alternatives we discussed in a previous lesson.

Code example: shorthand

Copy
.lonely-box {
  margin: 1em;             /* equivalent */
  margin: 1em 1em;         /* equivalent */
  margin: 1em 1em 1em 1em; /* equivalent */
  border: 1px solid black;
}

which produces

The div below me has 1em margin on all sides. That's why I am so far away.

.lonely-box

The div above me has 1em margin on all sides. That's why I am so far away.

Notice how there is a 1em distance between the the border and the two other paragraphs on the top and bottom sides.

Code example: extended

Copy
.lonely-box {
  margin-top: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  border: 1px solid black;
}

This .lonely-box class and the previous one accomplish the exact same style. Which one we choose is up to us, though most developers tend to prefer the shorthand version.

Code example: centering

Copy
.centered {
  width: 512px;
  margin: 0 auto;
}

We can center elements horizontally within its parent element by explicitly specifying a width and setting the right and left margins to auto.

I am horizontally centered within my green parent element.

<div class="quote">
  <div class="text">
    The Earth is beautiful, and bright, and kindly, but that is not all. The Earth is also terrible, and dark, and cruel. The rabbit shrieks dying in the green meadows. The mountains clench their great hands full of hidden fire. There are sharks in the sea, and there is cruelty in men’s eyes.
  </div>
  <footer>
    -- Ursula K. Le Guin, <em>The Tombs of Atuan</em>
  </footer>
</div>

.quote footer {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 1em;
}

.quote {
  color: #093371;
  background-color: #a5d6a7;
  border: 0.25em solid black;
  border-radius: 0.50em;
  padding: 2em 2.5em;
}

.quote .text {
  background-color: rgba(255, 255, 255, 1.0);
  padding: 1em;
  display: inline-block;
}