CSS3 Padding

CSS3 Padding

CSS3 padding property defines the spacing between the border and content enclosed within the element. CSS3 allows you to define padding for your HTML elements.

Furthermore, you can define padding for each side of an element such as the top, bottom, right, and left.

CSS3 Padding Individual Sides

With CSS3, you can define padding for all the corners of an element, such as:

  • Padding-top
  • Padding-bottom
  • Padding-left
  • Padding-right

The following values are only acceptable for the padding property.

  • length – accepts padding value in px, pt, or cm.
  • % – defines what % of the width of the containing element will the padding occupy?
  • inherit – instructs the browser to inherit the padding value from the padding element.

While declaring padding, bear in mind that negative values are not allowed.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Padding
    </title>
    <style>
        div {
            padding-top: 40px;
            padding-bottom: 55px;
            padding-left: 25px;
            padding-right: 35px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <h2>Applying an individual padding properties to div element</h2>
    <div>
        This div element has top padding of 40px, bottom padding of 55px, left padding of 25px, and
        right padding of 35px
    </div>
</body>
</html>

 

The output of this code will be

CSS3 Padding

CSS3 Padding Shorthand Property

To shorten your code, you can define all the padding values in one property. While defining padding, we can just write padding. We don’t have to specify all the individual padding properties.

Let’s see how it works in the real world.

If the CSS padding property has four values, then we can define it like this:

padding: 14px 28px 42px 56px

In the above-mentioned code snippet

  • top padding is 14px
  • right padding is 28px
  • bottom padding is 42px
  • left padding is 56px

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Padding
    </title>
    <style>
        div {
            background-color: mediumaquamarine;
            border: 1px solid blue;
            padding: 14px 28px 42px 56px;
        }
    </style>
</head>
<body>
    <h2>CSS padding shorthand property with 4 values</h2>
    <div>
        this div element has top padding of 14px, right padding of 28px, bottom padding of 42px,
        and left padding of 56px
    </div>
</body>
</html>

 

The output of this code will be

CSS3 Padding

Moreover, you specify padding with three values:

padding: 16px 48px 64px;

in the above-mentioned example, we define padding with three values.

  • Top padding is 16px
  • Left and right padding is 43px
  • Bottom padding is 64px

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS3 Padding
    </title>
    <style>
        div {
            background-color: mediumorchid;
            padding: 16px 48px 64px;
            border: 1px solid greenyellow;
        }
    </style>
</head>
<body>
    <h2>CSS padding shorthand property with 3 values</h2>
    <div>
        this div element has top padding of 16px, right and left padding of 48pxpx,
        and bottom padding of 64px
    </div>
</body>
</html>

 

The output of this code will be

CSS3 Padding

Similarly, we can define padding property with two values.

padding: 55px 110px;

in the above-mentioned example:

  • Top and bottom paddings are 55px
  • Right and left paddings are 110px

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: khaki;
            border: 1px solid gray;
            padding: 55px 110px;
        }
    </style>
</head>
<body>
    <h2>CSS padding shorthand property with 2 values</h2>
    <div>
        this div element has top and bottom padding of 55px, right and left padding of 110px
    </div>
</body>
</html>

 

The output of this code will be

CSS3 Padding

Lastly, we can specify padding property with only one value.

padding:60px;

In this example all top, bottom, right, and left paddings are 60px.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: lightcyan;
            border: 1px solid blue;
            padding: 60px;
        }
    </style>
</head>
<body>
    <h2>CSS padding shorthand property with 1 values</h2>
    <div>
        All the four paddings are 60px
    </div>
</body>
</html>

 

The output of this code will be

CSS3 Padding

CSS3 Padding and Element Width

CSS width property defines the width of HTML element. In the CSS3 box model, we have discussed that an element’s content area includes the margin, padding, and border of an element.

Therefore, if we specify the width of an element, padding will be added to the total width of that particular element.

Example

<!DOCTYPE html>
<html>
<head>
     <style>
        .d1 {
            background-color: lightskyblue;
            width: 400px;
        }
        .d2 {
            background-color: mediumaquamarine;
            width: 400px;
            padding: 25px;
        }
    </style>
</head>
<body>
    <h2>CSS padding property with width</h2>
    <div class="d1">This div element is 400px wide</div>
    <br><br><br>
    <div class="d2">
     Even though this div element is 400px wide, but its actual width is 25px
    </div>
</body>
</html>

 

The output of this code will be
CSS3 Padding

External Sources

48
48
48
Next Lesson » « Previous Lesson