CSS Padding

CSS Padding

With CSS Padding you will be able to change the default padding that appears inside various HTML elements (paragraphs, tables, etc). But first, let us make sure we understand the definition of padding. A padding is the space between an elements border and the content within it.

Please see the example below for a visual representation. Note: The border has been made visible, for each element, so you may more readily see the effects of padding.

p {padding: 0px; border: 1px solid black; }  

h5{padding: 0px; border: 1px solid red;} 

 

There are several ways to go about defining the CSS Padding attribute. We will show you every possible way and let you know which ways are the best.

CSS Padding 1 Value

As you saw in the example above, padding can be uniform inside an element. Specifying one value will create a uniform padding on all sides: top, right, bottom, left. In addition to using exact values, you may also define the padding with the use of percentages.

p {padding: 2%; border: 1px solid black; } 

h5{padding: 0px; border: 1px solid red;} 

 

CSS Padding padding direction

Each HTML element actually has 4 different paddings: top, right, bottom, and left. It is possible to define these individual paddings simply by adding a direction suffix to the padding attribute. Example form: padding-(direction). Defining only one direction will leave the other 3 default paddings untouched.

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

h5{ 

    padding-top: 0px;

    padding-right: 2px;

    padding-bottom: 13px;

    padding-left: 21px;

    border: 1px solid red; 

} 

 

CSS Padding Values

Four padding values can be declared at once by either specifying two or four values. When only using two values, the first will define the padding on the top and bottom, while the second will define the padding on the left and right.

When using the four value padding specification, the corresponding directions are: top, right, bottom, left. To help you remember what the order is, just remember that it starts at the top and then moves clockwise until it reaches the left. The examples below shows partial (2) and complete (4) padding usage.

p {

    padding: 5px 15px; 

    border: 1px solid black; 

}  

h5{

    padding: 0px 5px 10px 3px; 

    border: 1px solid red;

}