Padding CSS Class, Free CSS Tutorial for Beginners, Responsive CSS Examples

CSS Padding Property Style

In CSS padding properties are used to create space around an html element, most of the time padding is used for <div>, <p>, <span>, but it can go with any other element.

Padding - Each Side

CSS has properties for creating padding space for each side of any element
  • padding-left
  • padding-right
  • padding-bottom
  • padding-top
Any Padding property can have the following values:
  • % - indicate padding in % of the width of container
  • length - specifies a fix padding in px, pt, cm, etc.

Padding Example

    <div style="padding:10px;">        
    // Or you can write a style with different padding on each side     
    // Padding in percentage
    <div style="padding:10%;">            

Another way to write it

div {
    padding: 15px 40px 100px 10px;

Above indicate
top padding is 15px
right padding is 40px
bottom padding is 100px
left padding is 10px

CSS Style Examples