CSS Padding a Magic Wand

I have asked this question from many developers but never got the right answer“ What is the meaning of percentage while giving padding or margin in CSS ?”

The answers I got were fascinating, 70% of the developers were confused, 30% replied it is the percentage of the property of the parent element.

So, for this 30% my next question is always: “ Which property of the parent element, Is it the percentage of the parent’s width or height or padding or margin or the border?”

Difficult right!!, Don’t worry if you don’t know the answer it’s only 1% of the developers who were able to crack this question. Well, when you figure this out, you will be surprised to know that:

“The margin and padding of a child element in percentage is the percentage of the width of its parent element.”

Let’s try this with an example, by creating a parent and child div.

The 10% padding of the child class is calculated as:

Padding of child = x% * ( width of the parent element )

That comes out to be 10px as shown in the box model of child.

Child Element with 10% padding

Now you know the answer and can calculate the margin and padding of the elements in percentages.

My last question from the developers is “ What is the meaning of height of the child element in percentages? Does it also calculated by the width of the parent like we have seen in margin and padding?”

Let’s try this as well

Child Element with 10% height

Oops… this was not that we expected, the height of the child element is calculated by the height of the parent element.

Height of child = x% * ( height of the parent element )

So, we just learnt two basic rules:

1. Margin and Padding in percentages are calculated by the width of the parent element.
2. Height in percentages is calculated by the height of the parent element.

Try This

Let’s try to make a responsive circular widget in a responsive card ?

index.html

style.css

Let’s check this out:

Desktop View

Mobile View

Yay… Looks Good, but if you see it carefully, you will realise that the widget width is not changing relative to the card. The widget is not responsive at all :(

Correct Output:

Responsive Widget

The widget inside the card is changing it’s width and height according to the card.

If you are thinking, that replacing pixels with percentages only can solve this problem, then you are wrong :)

Remember the two rules we discussed above, if we give the height of the widget in percentages, then that will be calculated according to the height of it’s parent ( the card ).

As the width of the card is changing but the height of the card is constant, the width of the widget inside it will change while the height will not. This will make a circle an ellipse and then something like a moon :p

Solving the Problem with the Magic Wand

Remember the Magic Wand “ Padding “ :)

What will happen if we remove the height from the card and give it a padding-bottom in percentages ?

The padding bottom will be calculated with respect to the width of the parent of the card i.e col-md-6 width. It means the padding bottom will behave same as width of the card.

Wonderful !! Now, if we give height to the outer-circle in percentages.
It will get height from the padding-bottom property of the card ( which is actually the width of the parent of the card )

The padding-bottom here is working as a virtual height for the outer-circle and hence produces a responsive layout.

I hope this article helped you see the magic you can do using padding in CSS.

If you liked the article, please clap your heart out. Tip — You can clap 50 times!

Please also share on Fb and Twitter. If you’d like to get updates, follow me on Twitter and Medium. If anything is not clear or you want to point out something, please comment down below.