Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

CSS Padding Property, CSS Tutorial


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;">
</div>

// Or you can write a style with different padding on each side
<style>
.pc
{
padding-left:10px;
padding-right:15px;
padding-top:8px;
padding-top:6px;
}
</style>

// Padding in percentage
<div style="padding:10%;">
</div>


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 Padding Property, CSS Tutorial

Group Training