CSS Properties

Padding

The CSS property padding can be used to create space between the content of an element and its border. The value of this property can be specified using any of the length unit specification alternatives we discussed in a previous lesson.

In the next section, we will look at the margin property. This property also deals with spacing, but creates spacing around an element instead of between.

Code example: shorthand

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

which produces

.padded-box

Notice how there is a 1em distance between the text and the border on the top, right, bottom and left sides.

Code example: extended

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

This .padded-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.

<div class="quote">
  <div class="text">
    Forgetting... is a beautiful thing. When you forget, you remake yourself... For a caterpillar to become a butterfly, it must forget it was a caterpillar at all. Then it will be as if the caterpillar never was & there was only ever a butterfly.
  </div>
  <footer>
    -- Shara Thivani, <em>City of Stairs </em>
  </footer>
</div>

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

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

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