Abdelrahman Ismail

Posted on Oct 1, 2018 • Edited on Oct 13, 2019

Quick CSS Quiz #2

#challenge #css #quick #quiz

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth.

The problem:

Having the following code snippet, for two divs, the #container div has a width of 300px and hight of 200px, the #box div has 100% padding-left and padding-top.
what is the rendered #box div width and height respectively?

<div id="container" style="width: 300px; height: 200px;">
    <div id="box" style="padding-top: 100%; padding-left: 100%;"></div>
</div>

Options:

200px and 200px
300px and 300px
200px and 300px
300px and 200px

The answer:

you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.

👇👇👇

The correct answer is: "300px and 300px" 🎉🎉
If you wonder why this is the correct answer, please read the discussions below.

Top comments (15)

Abdelrahman Ismail • Oct 2 '18

To know why this is the right answer we have to dig into how the CSS percentage unit works, the percentage unit is a CSS relative unit so it has to be relative to an absolute value, and this is summary of how it works with different properties:

margin, padding, left, right
- It will be relative to element's parent width (even top and bottom margin/padding will be relative to the parent’s width)
top, bottom
- It will be relative to element's parent height
transform
- It will be relative to the element itself, either its width or its height.

So here we are working with padding top and left properties, and both are relative to the #container's width and be calculated based on its value.

Omar Jasseh • Oct 2 '18

Your explanation is very straightforward and convincing... I will definitely fiddle with this. Thanks so much. @Abdelrahman . :)

Abdelrahman Ismail • Oct 2 '18

You're welcome, I'm glad that you benefited from this. 😄😄

Abdelrahman Ismail • Oct 2 '18

You can find more about this here 😄👇

CSS percentage unit, the evil parts

Abdelrahman Ismail

#css#transform#evilparts#centering

Omar Jasseh • Oct 2 '18

I like your posts, cuz it helps me think CSS more deeply..I am wondering why 300px × 300px...I think if you should explain and give reasons for your answers..that way we can learn better and also get the concept..

Abdelrahman Ismail • Oct 2 '18

Thank you, sure I'll explain why. 😄😄

MrEdel • Oct 2 '18

I know that padding is always calculated from the width but I can't say why, there is no real reason in the specs.

I just knew the answer because I had to build a webpage with squares as page elements where I used the padding technique to get it to work without fixed widhts and heights for the squares.

Abdelrahman Ismail • Oct 2 '18

This is one of the CSS behaviors that can be awkward at first, but once you learn it, you will know how it's so powerful tool.
As you said you can use it to create perfect squares, even more you can create a fixed ratio between width and height for example, this is how you can create a responsive video base on this behavior:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Hussein Duvigneau • Oct 3 '18

This was always a useful trick for preserving an element's aspect ratio (change the percentage of the padding), though I haven't used CSS in a few years now so not sure if there are better ways now, but this still should work flawlessly.

Camilo Martinez • Oct 2 '18

Wrong answer: I choose 300px and 200px.

I thing it's the correct because box have no content.

Please explain why

Abdelrahman Ismail • Oct 2 '18

Yes, this the behavior for percentage unite with padding property (even top and bottom padding) it always calculated relative to element's parent width.