P
pagenflow
CSS Reference

Padding

csspadding
P
Pagenflow
Posted: September 9, 20229 min read

The padding is a CSS shorthand property that sets the padding area on all four sides of an element at once.

An element's padding area is the space between its content and its border.

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

Syntax

The padding property may be specified using one, two, three, or four values. Each value is a length or a percentage. Negative values are invalid.

  • When one value is specified, it applies the same padding to all four sides.
  • When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
  • When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom.
  • When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).

Examples

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

Setting padding with pixels and percentages

padding: 5%;                /* All sides: 5% padding */

padding: 10px;              /* All sides: 10px padding */

padding: 10px 20px;         /* top and bottom: 10px padding */
                            /* left and right: 20px padding */

padding: 10px 3% 20px;      /* top:            10px padding */
                            /* left and right: 3% padding   */
                            /* bottom:         20px padding */

padding: 1em 3px 30px 5px;  /* top:    1em padding  */
                            /* right:  3px padding  */
                            /* bottom: 30px padding */
                            /* left:   5px padding  */

Values

  • length: The size of the padding as a fixed value.
  • percentage: The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode) of the containing block.

Constituent properties

This property is a shorthand for the following CSS properties:

  • padding-bottom
  • padding-left
  • padding-right
  • padding-top

Related Articles

Margin

The margin CSS shorthand property sets the margin area on all four sides of an element.

Arnold LAMBOU
Posted: September 8, 202214 min read

Start building today

Choose a template and create your site in minutes. No need to create an account to get started

Start building now
Join our waiting list and stay informed
P
© 2024 Pagenflow. All rights reserved.