CSS Padding

“Padding” is the white space between the border and the inline content, in paragraphs and tables to improve clarity and indentation of the content. You can easily modify the default padding using simple CSS codes, to customize the look and feel of your content. The padding could be either in top, right, bottom, or left side of the content, based on your choice.

 

 

Syntax:

 

<paragraph tag> {padding: <value>; border: <value attribute color>;} ,

where the padding value could be in length or percentage.

 

Example:

H3 {padding: 3px; border 1px solid red}

 

When the above code is executed, the resulting heading has a uniform padding of 3 pixels on all the sides of the paragraph.

 

Output:

 

 

If you want to apply padding on only one side of your content, you can add a direction suffix to the padding attribute.

 

Example:

p { padding-left: 5px; border: 2px solid black; }

h5{

    padding-top: 0px;

    padding-right: 2px;

    padding-bottom: 13px;

    padding-left: 21px;

    border: 1px solid blue;

}

 

Output:

 

 

 

 

There is also another simple way to define padding values:

1.      Padding using two values – one value for top and bottom, and another value for left and right.

2.      Padding using four values in the order of top, right, bottom, and left clockwise. You can memorize this easily using the phrase “TReBLe clock”.

 

Example:

p {

    padding: 5px 10px;

    border: 1px solid green;

 

h5{

    padding: 2px 10px 10px 3px;

}

 

 

 

Similarly, you can use the CSS codes to apply padding to the contents of a table:

Example:

td

{padding-right: 10px;

padding-left: 2px;

padding-top: 5px;

padding-bottom: 5px;}

Output:

 

css.php