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.
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>
- 200px and 200px
- 300px and 300px
- 200px and 300px
- 300px and 200px
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.