CSS Padding Property

padding

The CSS padding properties define the space between the element border and the element content.

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. If the element has a background colour then the padding will inherit that colour.

With CSS Padding you will be able to change the padding that appears inside various HTML elements (divs, paragraphs, headings etc.). But first, let us make sure we understand the definition of padding. A padding is the space between an element's border and the content within it.

 

Padding Values

There are only two values that can be applied tp the padding property:

ValueDescription
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element

 

Padding - Individual sides

Like the margin property, it is possible to specify different padding for different sides like so:

.box {
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}

Let's create an example of how padding works. Firstly lets see a "div" element with a class "box" without any padding, a 1px border has been applied so we can show the example better.

This is a paragraph with no padding.

As you can see the text is against the border and difficult to see or read, so now we will create padding around the text with a style declaration.

.box {
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
}

This is how the same element looks now with 10px padding added:

This is a paragraph with 10px padding top and 30px padding left.

As you can see the text is separated from the border and is readable.


The Padding - Shorthand property

To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.

The shorthand property for all the padding properties is "padding:".

.box {padding:25px 50px;}

The padding property can have from one to four values that are used with the short-code "padding:".

  • padding:10px 5px 15px 5px;
    • top padding is 10px
    • right padding is 5px
    • bottom padding is 15px
    • left padding is 5px

    • padding: 10px 15px 5px;
      • top padding is 10px
      • right and left paddings are 15px
      • bottom padding is 5px

    • padding: 10px 15px;
      • top and bottom paddings are 10px
      • right and left paddings are 15px

  • padding: 10px;
    • all four paddings are 10px

All CSS Padding Properties:

PropertyDescription
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

Note:  When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left

 

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • No comments found

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter