CSS PADDING

❮ Prev Next ❯

The CSS padding property is used to create space around the element's content.

This paragraph has padding of 50px from border and 20px padding inside element.Unlike margin property padding property generate space only for content.

Using padding property we can specify top,bottom,left and right padding independently.These are following padding properties.

CSS padding properties

Property	Description
padding	This sets all the value of padding.
padding-top	It sets the top padding of the element.
padding-right	It sets the right padding of the element.
padding-bottom	It set bottom padding of the element.
padding-left	It set left padding of the element.

CSS padding values

Values	Description
length	It set padding in px,pt,cm etc.
%	It set padding using the percentage of the container.

Setting padding to element

Specifying CSS padding property and its value we can create padding over the element.

<p style="padding:none;">This paragraph has no padding.</p>
<p style="padding:25px">This has a padding of 25px.</p>

▶ Run the code

Set different padding

We can specify different margin values to different side of the elements by using

padding-top
padding-right
padding-bottom
padding-left

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

▶ Run the code

CSS padding shorthand

Padding shorthand property is used to specify different padding to different side of element using just one attribute padding.Example : padding : 20px 30px 40px 50px

The values in shorthand padding are set anticlockwise starting from top=20px,right=30px,bottom=40px and ends at left=50px.

.shorthand{
    padding: 20px 30px 40px 50px;
}

▶ Run the code

❮ Prev Next ❯