Brief Overview of CSS Padding

Illustration of man working on laptop sitting on laptop with CSS HTML code on screen with code tags in background

Lightcome / Getty Images

CSS padding is one of the properties of the CSS box model. This shorthand property sets the padding around all four sides of an HTML element. CSS padding can be applied to nearly every HTML tag (except for some of the table tags). Additionally, all four sides of the element can have a different value.

CSS Padding Property

To use the shorthand CSS padding property, you can use the mnemonic “TRouBLe” (or “TRiBbLe” for you Star Trek fans). This stands for top, right, bottom, and left, and it refers to the order of the padding widths you set in the shorthand property. For example:

padding: top right bottom left;
padding: 1px 2px 3px 6px;

If you used the values listed above, it would apply a different padding value to every side of whatever HTML element you are applying it to. If you want to apply the same padding to all four sides, you can simplify your CSS and just write one value:

padding: 12px;

With that line of CSS, 12 pixels of padding would apply to all 4 sides of the element.

If you want the padding to be the same for the top and bottom and left and right, you can write two values:

padding: 24px 48px;

The first value (24px) would apply to the top and bottom, while the second would apply to the left and right.

If you write three values, that will make the horizontal padding (left and right) the same, while changing the top and bottom:

padding: top right-and-left bottom;
padding: 0px 1px 3px;

According to the CSS box model, padding is closest to the element/content itself. This means that padding is added to an element in between the content width or height and any border values you use. If the padding is set to zero, then it has the same edge as the content.

CSS Padding Values

CSS padding can take any non-negative length value. Be sure to specify the measurement, such as px or em. You can also specify a percentage for your padding, which will be a percentage of the width of the element’s containing block. This includes top and bottom padding. For example:

#container { width: 800px; height: 200px; }
#container p { width: 400px; height: 75%; padding: 25% 0; }

The height of the paragraph inside the #container element will be 75% of the #container’s height plus 25% of the width for the top padding and 25% of the width for the bottom padding. This totals 300 + 200 + 200 = 700px.

Effects of Adding CSS Padding

On block-level elements, the padding is applied on the four sides. Because the element is a block or box already, the padding is applied to the box sides.

When CSS padding is added to inline elements, there may be some overlapping of elements above and below the inline element if the vertical padding exceeds the line height, but it will not push the line-height down. Horizontal CSS padding applied to inline elements will be added to the beginning of the element and the end of the element. And the padding may wrap lines. But it will not apply to all lines of a multi-line element, so you cannot use padding to indent a segment of multi-line inline content.

Also, in CSS2.1, you can’t create container blocks where the width depends upon an element with percentages for widths (or padding widths). If you do the result is undefined. Browsers will still display the contents, but you may not get the results you are expecting. If you think about it, it makes sense, as if your container element needs to know the width of its child elements in order to define its width — such as when it doesn’t have a pre-defined width, and one or more has a width set as a percentage of the container element, this sets up a circular chain with no answer. If you use percentages for widths of anything on your document, you should make sure that the parent element widths are also defined.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Brief Overview of CSS Padding." ThoughtCo, Apr. 5, 2023, thoughtco.com/css-padding-overview-3469778. Kyrnin, Jennifer. (2023, April 5). Brief Overview of CSS Padding. Retrieved from https://www.thoughtco.com/css-padding-overview-3469778 Kyrnin, Jennifer. "Brief Overview of CSS Padding." ThoughtCo. https://www.thoughtco.com/css-padding-overview-3469778 (accessed March 28, 2024).