If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

  Padding offers you the ability to change the default padding that exists in some HTML typo (tables, paragraphs, and others). First lets define padding. Padding represents the space from an element’s border and the content within it.

We have attached an example bellow for a visual representation. P.S : The border is made visual for all the elements, so you can see the effects of padding.

CSS code :

The CSS Padding attribute can be definig several ways. We will show you the ways and let you know which are the best.

Padding: 1 Value

The previous example, show you that padding can be uniform in a element. If you are adding a value it will create a uniform padding on all sides : top, right, bottom, left. For a better precision you can use percentage.

CSS code:

Padding-(direction):

Every HTML element has 4 distinct paddings : top, right, bottom, left. For defining each element add a direct suffix to the padding attribute. For padding - direction you will have 3 default paddings untouched.

CSS code:

Padding: 2 & 4 Values

Padding values can be declared once or just two. For using just two, you will define just the top and bottom padding, while the second ones will define the left and right ones.

When you are using the 4 specification, the direction are: top, right, bottom, left. The order is like a clockwise, until it reach left.