The padding property allows you to specify how much space should appear between the content of an element and it's border. With Stylet we can add padding right, padding left, padding top, padding bottom and a general padding that sets the left, right, top and bottom.
i have no padding of any standard
i have a padding of stylet standard 6
i have a padding top of stylet standard 6
i have a padding bottom of stylet standard 6
i have a padding right of stylet standard 6
i have a padding left of stylet standard 6
<div class="pink-bg">i have no padding of any standard</div>
<br>
<div class="pad-6 pink-bg">i have a padding of stylet standard 6</div>
<br>
<div class="pad-top-6 pink-bg">i have a padding top of stylet standard 6</div>
<br>
<div class="pad-btm-6 pink-bg">i have a padding bottom of stylet standard 6</div>
<br>
<div class="pad-right-6 pink-bg">i have a padding right of stylet standard 6</div>
<br>
<div class="pad-left-6 pink-bg">i have a padding left of stylet standard 6</div>
Let's make a clearer example on using padding.
Let's create a simple looking header
This is a nice but kind of flat header, we can add padding to it
Now we've added a padding to it. It looks more better now doesn't it?
Let's add padding only to it's top and it's bottom and see.
/* without padding */
<div class="dark-bg">
<a href="javascript:void(0)">Home</a>
<div class="text-float-right">
<a href="javascript:void(0)">Features</a>
<a href="javascript:void(0)">Community</a>
</div>
</div>
/* with padding */
<div class="dark-bg pad-4">
<a href="javascript:void(0)">Home</a>
<div class="text-float-right">
<a href="javascript:void(0)">Features</a>
<a href="javascript:void(0)">Community</a>
</div>
</div>
/* with padding to top and bottom only */
<div class="dark-bg pad-top-4 pad-btm-4">
<a href="javascript:void(0)">Home</a>
<div class="text-float-right">
<a href="javascript:void(0)">Features</a>
<a href="javascript:void(0)">Community</a>
</div>
</div>