CSS Padding Property to HTML Elements

Working with Margin and Padding property are a like. The big difference is that margin is applied in between borders of two elements where as padding applied between the border and the content of the element. For nice looking design of web page, padding property is very important. Today, I have explained the way of using this property. Before that you must have knowledge to integrate CSS to HTML and using CSS selectors.

1. padding: A

Padding to all side

The syntax for padding property is selector {padding: A} where A is distance between the border and content of the elements. The example code is given below:

<style>
   .box1{
        padding:40px;
        } 
</style>
<div class="box1">
    <p>This is Content</p>
</div>

Here, 40px padding distance applied between the content and border of .box1

2. padding-left, padding-right, padding-top, padding-bottom

padding to each side

These properties are used to apply padding between the content and border in each side. padding-left is for left side, padding-right is for right side, padding-top is for upper side and padding-bottom is for bottom side. Example code is given below:

<style>
    .box1{
         padding-left:100px;
         padding-top:10px;
         padding-right: 20px;
         padding-bottom:60px;
         } 
</style>
<div class="box1">
    <p>This is Content</p>
</div>

3. padding: A B

padding to two side

A and B are two padding distance values. This method is used to keep padding horizontally and vertically. A is for top and bottom where as B is for left and right side. Syntax for this method is selector {padding: A B;} . Real coding looks like selector {padding: 40px 10px;} . You can able to change padding distance as you need.

4. padding: A B C D

padding to four side

If you have to give padding to each side of content separately in one property rule then this method is best for you. Here, A is for top, B is for right, C is for bottom and D is for left side padding. Syntax for this method is selector{padding: A B C D;} and real coding looks like selector {padding: 100px 20px 30px 60px; } .

Posted By : Hari Prasad Chaudhary | Comment RSS. Category : Web Development
Tag : ,