CSS Padding

Padding is another essential CSS component used to provide additional internal space to all four sides of an HTML element. CSS offers different properties to specify how much space should be between your HTML element and its boundary. In this chapter, you will learn about the various CSS properties that are implemented to provide padding.

Padding Property in CSS

With the help of CSS, it is possible to have full control over the HTML element's padding feature. The padding value implemented within CSS should have to be either of the following:

  1. A percentage value (specify the width of the containing element).
  2. A Length (px, pt, cm, etc).
  3. A word inherit (padding value can be inherited from the parent element).

With the following properties, a different set of values ​​can be assigned to the CSS padding for each side of the HTML element.

CSS PropertyDescription
paddingThe CSS padding property is used as a shorthand for its different properties. It will be explained below with examples.
padding-topThe CSS padding-top is used to indicate the top padding for your element.
padding-rightThe CSS padding-right is used to indicate the right padding for your element.
padding-bottomThe CSS padding-bottom is used to indicate the bottom padding for your element.
padding-leftThe CSS padding-left is used to indicate the left padding for your element.

Here is a sample code snippet showing the implementation of all four (top, right, bottom, and left) CSS padding properties:

Example:
<style>
    selector {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
    }
</style>

Shorthand Padding Property

To shorten your CSS, it is probable to specify all four (top, right, bottom, and left) padding properties under a single property. The padding property, as discussed above, is the individual padding properties. To use shorthand, you must use the padding property, which includes four other margin properties.

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 2px solid black;
            padding: 30px 40px 65px 90px;
            background-color: oldlace;
        }
    </style>
</head>

<body>
    <h2>Padding shorthand property</h2>
    <div>Padding is another important component of CSS that is used for providing extra spaces in all the 4 sides of any HTML element.</div>
</body>
</html>

So, let's look at the example above to see how shorthand padding property works:

When padding property has four values:

  • top padding is 30px
  • right padding are 40px
  • bottom padding is 65px
  • left padding is 90px

When padding property has three values:

  • top padding is 30px
  • right and left padding are 40px
  • bottom padding is 65px

When padding property has two values:

  • top and bottom padding is 30px
  • right and left padding are 40px

When the padding property has one value:

  • all the four paddings are 30px

This is how the shorthand padding feature works.

Padding and Element Width

The width property of CSS is used to indicate the element's width concerning the content area. The content area can be defined as the section within the padding, border, and margin of your element. When you mention that your HTML element has a specified width, it means the padding included in the element has to be added with your element's total width.

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        div.class1 {
            width: 410px;
            background-color: orange;
        }
        
        div.class2 {
            width: 410px;
            padding: 40px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h2>Padding with element width</h2>
    <div class="class1">This div has width of 250px.</div>
    <br>
    <div class="class2">This div has width 410px</div>
</body>
</html>

Scroll Back to Top