CSS PADDING

CSS defines the innermost portion of the box model, generating space around an element’s content, inside of any with CSS. You have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding – Individual Sides

CSS has properties for specifying the padding for each side of an element.

padding-top

padding-right

padding-bottom

padding-left

All the padding properties can have the following values.

length – specifies a padding in px, pt, cm, etc.

% – specifies a padding in % of the width of the containing element.

inherit – Specifies that the padding should be inherited from the parent element.

EXAMPLE.

div {

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

Padding – Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties.

padding-top

padding-right

padding-bottom

padding-left

So, here is how it works. If the padding property has four values:

padding: 25px 50px 75px 100px;

top padding is 25px

right padding is 50px

bottom padding is 75px

left padding is 100px

EXAMPLE

div {

padding: 25px 50px 75px 100px;

}

Padding and Element Width

The CSS width property specifies the width of the element’s content area. The content area is the portion of the padding, border, and margin of an element (the box model). So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):

EXAMPLE

div {

width: 300px;

padding: 25px;

}