Padding

padding property sets the padding area of an element (the distance between the element's content and its border).

Basic Concepts

There are 4 positions for a padding: top, right, bottom, left (remember: clockwise direction).

Additionaly, you can also specify padding positions based on the direction of writing (these would be based on writing-mode, direction, and text-orientation values):

• Inline direction — is the direction of writing (e.g. left-to-right, right-to-left, top-to-bottom)
• Block direction — is the direction perpendicular to inline position (i.e. the direction of how you add new lines to your paragraph)

Common Padding Properties

padding

Sets the top, right, bottom, and left padding of an element in one declaration (remember: clockwise direction).

If you specify less than 4 lengths, the missing lengths would be inferred from the lengths that you specified (it will try to make symmetrical padding).

Possible length values:

• length — E.g. 10px or 2em.
• percentage — E.g. 10%. Sets the padding relative to the container's width.

<div id="padding-example">
  Lorem ipsm dolor sit amet
</div>

#padding-example {
  padding: 20px;
  border: 1px solid red;
  background-color: #ddf;
}

padding-top

Sets the element's top padding. (See padding.)

padding-right

Sets the element's right padding. (See padding.)

padding-bottom

Sets the element's bottom padding. (See padding.)

padding-left

Sets the element's left padding. (See padding.)

Obscured Padding Properties

padding-inline-start

Sets the padding at the start of "inline" direction. (If you're writing horizontally from left to right, then it maps to padding-left.)

padding-inline-end

Sets the padding at the end of "inline" direction. (If you're writing horizontally from left to right, then it maps to padding-right.)

padding-inline

Shorthand for padding-inline-start and padding-inline-end.

p {
  padding-inline: <padding-inline-start> <padding-inline-end>;
  padding-inline: <padding-inline-start>;
}

padding-block-start

Sets the padding at the start of "block" direction. (If you're writing horizontally from left to right, then top to bottom, then it maps to padding-top.)

padding-block-end

Sets the padding at the end of "block" direction. (If you're writing horizontally from left to right, then top to bottom, then it maps to padding-bottom.)

padding-block

Shorthand for padding-block-start and padding-block-end.

div {
  padding-block: <padding-block-start> <padding-block-end>;
  padding-block: <padding-block-start>;
}

References

• padding (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/padding