CSS Padding

This tutorial helps you learn how to adjust an element's padding area using CSS.

CSS Padding Properties

You can use the CSS padding properties to set the spacing between an element's content and its border (or the edge of the box of an element if it has no defined border).

The padding is affected by the background-color of an element. So, for example, if you set an element's background color, it will be visible through the padding area.

Define Paddings for Individual Sides

The paddings can be specified for an element's individual sides, such as the top, bottom, right, and left sides, using the CSS padding-top, padding-bottom, padding-right, and the padding-left properties, respectively. Let's take an example to see how it works:

Example :

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

Try With Example

You can specify the padding properties using the following values: 

• length - It is used for specifying padding in px, em, rem, pt, cm, etc. 
• % - specifies padding in percentage (%) of the containing element's width. 
• Inherit - specifies that it should inherit the padding from the parent element.

Note: The values for the padding properties cannot be negative.

The Padding Shorthand Property

The padding shorthand property is a property to avoid setting padding of each side separately, i.e., padding-top, padding-right, padding-bottom, and padding-left.

Consider the following example to see how it basically works:

Example :

h1 {
    padding: 50px; /* apply to all four sides */
}
p {
    padding: 25px 75px; /* vertical | horizontal */
}
div {
    padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
    padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}

Try With Example

The padding shorthand notation takes one, two, three, or four whitespaces separated values.

• In case one value has been specified, it is applied to all four sides. 
• In case two values are specified, then the first value specified by you is applied to the top and bottom side, and the second value specified is applied to the left and right side of the element's box.
• In case three values are specified, in that case, the first value specified by you is applied to the top, the second value is applied to the right and left sides, and the third value is applied to the bottom.
• In case four values are specified, then these values are applied to the top, right, bottom, and left side of the box of an element in the specified order.

Using the shorthand properties will help you save some time by avoiding the extra typing. In addition, it makes your CSS code easier to follow and maintain.

Effect of Padding and Border on Layout

Adding padding or border to the elements while creating web page layouts can sometimes produce unexpected results because padding and border are added to the width and height of the box generated by the element.

For example, in case you set the width of an <div> element to 100% and you also apply left right padding or border on it, then a horizontal scrollbar will appear. Let's see an example:

div {
    width: 100%;
    padding: 25px;
}

Try With Example

You can use the CSS box-sizing property to prevent padding and border from changing the element's box width and height. In the example mentioned here, the width and height of the <div> box will remain unchanged. However, the content area of the element box will decrease with increasing padding or border.

Example ;

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

Try With Example