tutorialstonight logo
A Platform To Learn To Code

CSS PADDING




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.

Example

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

Example

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.

Example

Run the code



BOX

BOX