Hello guys, I find myself struggling with answering this question from the css quiz:
Suppose the box-sizing of a node is border-box. The viewport is 1000 pixels wide. The margin is 50 pixels wide on both ends, the padding is 100 pixels wide on both ends, and the border is 5 pixels wide on both ends. The width of the element is set to 50vw. What is the width of the content area?
I have no idea why the answer is 290px. Can somebody explain please?
Hello mockaj!
So viewport is 1000px wide, width is set at 50 vw. This means the width of the element is 50 % of viewport width wich is 500 pixels
Box-sizing is set to border box. In essence this means that the padding and border have no influence on the width of the element. This means that the padding and border are included in the width of the element.
So the element consist of : content area + padding + border.
To calculate the width of the content area : content area = width element - padding - border.
content area = 500 - (2 x 100) - ( 2x 5)
content area = 290
Hope this clears things up for you!
Greetings, Kenneth.
That cleared that up. Great stuff, thank you!