CSS- Paddings

We use the padding property of CSS to specify how much space should appear between the content of an element and its borde.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. By using shorthand padding property, we can also change all properties at once .

There are properties for setting the padding for each side of an element (top, right, bottom, and left).

CSS padding property

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

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

    The padding-top To specifies the top padding of an element, we use the padding-top property.

    Example :-

    Result

    This is a paragraph with a specified top padding

    This is another paragraph with a specified top padding in percent

    Padding-right

    To specifies the right padding of an element, we use the padding-right property.

    Example :-

    Result

    This is a paragraph with a specified right padding

    This is another paragraph with a specified right padding in percent

    Padding-bottom :

    To specifies the bottom padding of an element, we use the padding-bottom property.

    Example :-

    Consider a simple style sheet file with a name mystyle.css having the following rules ?

    Result

    This is a paragraph with a specified bottom padding

    This is another paragraph with a specified bottom padding in percent

    Padding-left :

    To specifies the left padding of an element, we use padding-left property.

    Example

    Result

    This is a paragraph with a specified left padding

    This is another paragraph with a specified left padding in percent

    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