Can anyone explain how this CSS Quiz question works

Javascript Programming
#1

This is a questions in basic CSS and I just dont seem to understand it. The answer is 290px. Thanks

Q1. 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?

  • 500px
  • 300px
  • 290px - correct ans
  • 190px

Q2. The font-size of the html element is 10px. The body has a font-size of 1.6rem. Inside the body, the h1 element has a font-size of 3rem. What is the font size of the h1 element in pixels?

  • 10px
  • 16px
  • 30px - correct ans
  • 48px
1 Like
#2

The total width for the element can be calculated as:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

width = content area; 50vw = 50% of the viewport size

total element width = (50/100)*1000 = 500;
left padding = right padding = 100;
 left border  = right border = 5;
 left margin = right margin = 50;
Total element width = width + left padding + right padding + left border + right border + left margin + right margin;

500 = width + 100 + 100 + 5 + 5 + 50 + 50
500 = width + 310;
500 - 310 = width;
190 = width

The correct answer is 190 not 290, We have to fix on the forum. Thanks for bringing.

2 Likes
#3

rem a CSS unit which is relative to the font size of the html element.
em : a CSS unit which is relative to the font size of the parent element.

html font size = 10px;
body font size = 1.6rem;
h1 font size = 3rem = 3 *10px = 30px   // we take root element and html is the root element
if it was 3em we would have taken the body font size.
2 Likes
#4

Hi,

is 190px still the correct answer? Because the Quiz still says 290px is correct.

Thanks in advance!

2 Likes
CSS Quiz query - .crypto-prices.crypto-prices
#5

Hi there @Thoms

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!