CSS Padding

If you know CSS margins well, from the previous chapter then learning padding in CSS won't be difficult at all!. Concepts such as the parameters in the property, the seperate property workings all follow the same trends as those with margins.

So make sure margins are all good with you!

The padding of an element can be defined as the:

Padding are the exact opposite of margins. So let's say you have an element with a 20px padding on all its sides, it would look something like this with the pale green area respresenting the padding.

The element would have an inner spacing of 20px which would be considered in its width.

And just like there is margin for margins, we have the property padding for padding elements from their edges.

The code below assigns 20px of padding on all sides of the element - same as the example above.

p {
    padding: 20px;
}

Increasing the padding to 50px we have:

p {
    padding: 50px;
}

As you can see from these examples, padding gets the content within an element to breathe easily.

Following are the designs of two buttons. Which one do you think looks more appealing and more breathable?

Obviously Button 2, since it doesn't feel cluttered compared to the first one. The first button has 0 padding whereas the second one has 15px padding, and this establishes the fact that padding gets an element to have a breathing space.

With this explanation out of the way, let's now go over other concepts in CSS padding.

If we want to apply padding on different sides, differently then with the first choice we can use the padding property with its parameters.

padding with parameters

1. 4 parameters - different padding on all sides.

   padding: top right bottom left

   A 10px top, 10px right, 50px bottom and 100px left padding:

   p {
       padding: 10px 10px 50px 100px;
   }

   10px top, 10px right, 50px bottom and 100px left padding.

2. 2 parameters - different padding on opposite sides.

   padding: top-bottom right-left

   A 10px top AND bottom and 50px right AND left padding:

   p {
       padding: 10px 50px;
   }

   10px top-bottom and 50px left-right padding.

3. 3 parameters - different padding on top AND bottom sides, same padding on left-right sides.

   padding: top-bottom right-left

   A 10px left AND right, 50px top and 100px bottom padding:

   p {
       padding: 50px 10px 100px;
   }

   10px left-right, 50px top and 100px bottom padding.

Seperate sides, seperate properties

Apart from getting different paddings on different sides using the padding property we can also use the seperate properties padding-top, padding-right, padding-bottom and padding-left for their corresponding sides.

A 10px top, 10px right, 50px bottom and 100px left padding:

p {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 50px;
    padding-left: 100px;
}

You need these seperate properties only when you want to change one side's padding only without having to specify it for the others.

However the padding property shall be prefered in all cases except for the one mentioned above.

Congradulations programmer! With padding you've successfully completed a huge concept in designing i.e spacing.

If you feel that understanding padding or margins in CSS is difficult owing to the different forms of margin and padding properties respectively, then this is just your thinking!

All you need is to practice these properties on a daily basis until you feel dealing with any spacing question would be the game of seconds!

We've said before, and will emphasize again - CSS isn't difficult at ALL. Keep practising, and learning stuff - that will make you actually get into this fact, that CSS isn't difficult, in real. Otherwise even the simplest of stuff would seem difficult and go out of your head pretty quickly.