What Is the Padding Tag?

Properly used, padding lets you tweak your Web pages' look with one hand.

Cascading Style Sheet properties define a Web page's design by applying those properties to specific HTML tags. When the padding property is associated with a tag it changes the spacing around the elements within the tag. Padding plays a very specific role within CSS, and used properly will make your HTML both attractive and easy to tweak.

Padding Defined

The padding property is part of the CSS "box model," which uses a subset of properties to define each element as a box within a Web page. Even text is contained within a CSS box. The padding property defines the amount of space around the contents of the box. When you change the padding property for a box, it may grow or shrink to allow the appropriate amount of padding, dependent on other settings and whether the box size is defined with other CSS code. Padding is also the property that shifts the position of content within a box.

Padding vs. Margin

Padding functions differently from the margin property, which defines the space between the box and other boxes. It may be tempting to use the padding property for spacing, and when a box is transparent the effect may look the same. However, this can cause problems if you later add an outline or background to the box. By consistently using the padding and margin properties for their intended purposes, you'll ensure that your CSS code will be easier to adjust when necessary.

Using Padding

The padding property uses variables to describe both the amount of padding and the sides of the content on which to apply the padding. The most common format for describing padding is to use four numbers, representing the top, right, bottom and left of the box. The following CSS code applies 10 pixels of padding above and below the content of every <p> tag and 20 pixels of padding to the left and right sides:

p {padding: 10px 20px 10px 20px}

The amount of padding can be expressed in any CSS measurement format, most commonly in pixels, or as a percentage.

Variations

To apply padding to just one side, use either the primary padding property with the appropriate variables or the specific padding property for that side: padding-top, padding-bottom, padding-left or padding-right. Using the padding property with a single number will apply an equal amount of padding to all sides of the content:

padding: 25px

Using two numbers will apply the first value to the top and bottom and the second value to the left and right:

padding: 25px 10px

Using three numbers will apply the first value to the top, the second value to both sides and the third to the bottom:

padding: 25px 10px 15px

References

• W3Schools.com: CSS Padding
• W3C: Box Model
• Knight Digital Media Center: CSS 101: Margins and Padding