CSS Padding

Padding என்பது ஒரு html element-ன் border-க்கு உட்புறமாக, border-க்கும் text content-க்கும் இடையே கொடுக்ககூடிய space.

margin-padding.png

CSS Padding Properties

கீழ்கண்ட முறைகளில் padding apply செய்யபடுகிறது.

padding ஒரே declaration-ல் அனைத்து padding values-ஐயும் set செய்ய பயன்படுத்தபடுகிறது
padding-top used for set top padding of an element.
padding-right used for set right padding of an element.
padding-bottom used for set bottom padding of an element.
padding-left used for left padding of an element.

CSS Padding Values

auto This is used to let the browser calculate a padding.
length It is used to specify a padding %,pt, px, cm, etc. its default value is 0px.
inherit It is used to inherit padding from parent element.

Simple Example

Example

Try this code 
.short-mehtod1{
    padding: 10px 20px 10px 20px;
    background-color:#8d9440;
    margin:10px 0px;
	}
	.short-mehtod2{
    padding: 10px 20px 10px; 
    background-color: #b4e2e0;
    margin:10px 0px;	
	}
	.short-mehtod3{
    margin: 10px 20px;
    background-color: #b4e2e0;
    margin:10px 0px;  
	}
	.short-mehtod4{
    margin: 10px;
    background-color: #b4e2e0;
    margin:10px 0px; 
	}
	
	.margins-alone{
    padding-top:10px;
    padding-right: 20px;  
    padding-bottom: 10px;  
    padding-left: 20px; 
    background-color: #b4e2e0;
    margin:10px 0px;	
	}
	.padding-auto{
    padding: auto;
    background-color: #b4e2e0;
    margin:10px 0px;
	}
	.padding-inherit{
    padding:inherit;
    background-color: #b4e2e0;
    margin:10px 0px;
	
}

Example

Try this code 
 <div class="short-mehtod1">If you are depressed, you are living in the past</div>
	<div class="short-mehtod2">If you are anxious, you are living in the future</div>
	<div class="short-mehtod3">If you are at peace, you are living in present</div>
	<div class="short-mehtod4">Never reply when you are in angry</div>
	<div class="paddings-alone">Don't make promise when you are in happy mood</div>
	<div class="padding-auto">Don't make decision when you are in sad</div>
<div class="padding-inherit">Keep your mind always calm</div>

Output

If you are depressed, you are living in the past
If you are anxious, you are living in the future
If you are at peace, you are living in present
Never reply when you are in angry
Don't make promise when you are in happy mood
Don't make decision when you are in sad
Keep your mind always calm

Comments