CSS Padding a Magic Wand

Aayush Arora
Apr 21, 2018 · 4 min read

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

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

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.

Coding Blocks

Daily Tidbits on Android, Javascript and Machine Learning

Aayush Arora

Written by

Google Developer Expert for Web Technologies, Co-founder https://roobits.com

Coding Blocks

Daily Tidbits on Android, Javascript and Machine Learning

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade