Chapter 6 - What is Padding in CSS?

CSS Padding is an internal space around the content in the element.

Properties of Padding is quite same as Margin. Syntax is also same.

Padding is of 4 sides/types and it is a Clock wise direction while writing in coding:-

1. Padding-Top
2. Padding-Right
3. Padding-Bottom
4. Padding-Left

By default all sides have padding existed but with your CSS coding you can either remove or extend padding of 4 the sides.

The Padding property can be set for the top, right, bottom and left of an element. (See below example)

 Syntax of 4 sided padding:-

 padding-top:Value;
 padding-right:Value;
 padding-bottom:Value;
 padding-left:Value;

/*NOTE:- Padding value could be in Pixel, Percentage or em.*/ 

You can also declare a padding value in a single row as it is shown in below example:-

 For setting all 4 sided padding, use TRBL  format. Example:-

    padding:T R B L; (Top, Right, Bottom, Left)
 padding: 10px 20px 30px 40px;


/*NOTE:- Padding value should be read clock wise.*/ 

 If values of all sided padding is same then use the following syntax:-

    padding:10px; /*4 sides padding*/
 padding:-10px;/*negative padding of 4 sides*/

/*This will set 10px, -10px padding for all 4 sides*/
 
 padding:10px 20px; /*top, right padding*/

/*This will set 2 sided padding*/
 
 padding:10px 20px 30px; /*top,right, bottom*/


/*This will set 3 sided padding*/

You can read 4 sided padding as TRBL (this term is first ever used by CSSBASICTIPS.