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 element's border and the content within it. Setting the actual value of padding is just the same as with margin, so you can probably zip right through this lesson as well.

CSS Code

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

How It Looks

There are several ways to go about defining the css padding attribute. We will show you how they are done with the most common ways and let you decide which methods are the best for you.

SINGLE 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.

CSS Code

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

PADDING DIRECTIONS

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

CSS Code

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; 
} 

PADDING MULTIPLE 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 left and right, while the second value will define the padding on the top and bottom.

When using the 4 value padding specification, the corresponding directions to values 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.

CSS Code

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

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

Its basically the same as adding margins except its adding it on the inside of the element, not around the outside of it.