CSS Dimensions Quiz

Are you ready?

12 questions to solve

Instructions

This quiz goes to full-screen once you press the Start button.
At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.

Inline elements are affected by custom dimensions i.e width and height properties. True or False?

Custom dimensions don't get applied to inline elements - hence the choice (B)/ Refer to CSS Dimensions Basics for more info.

True False

In the following snippets what will be the final width of the div element?

<body>
    <section>
        <div>A div</div>
    </section>
</body>

section {
    width: 500px;
}
div {
    width: 100%;
    padding: 30px;
}

div is the child of section and hence will fill it up completely with the rule width: 100%. However due to the rule padding: 30px its width will exceed 500px (the width of section).

100% of body More than 100% of body 100% of section More than 100% of section

Consider the following code. You should assume that body isn't styled at all.

<body>
    <div>A div</div>
</body>

div {
    height: 100%;
    padding: 15px;
    background-color: grey;
}

Will the height rule in line 2 affect div's dimensions?

For a given element, height will act upon percentage values only if the element if positioned as fixed, or as absolute. For more info refer to CSS Positioning and CSS Dimensions Basics.

Yes No

Give all .box elements a width of 100 pixels and a height of 200 pixels.

width and height like most of CSS properties require non-string values i.e ones without quotation marks. Moreover they require values with a <length> unit such as px, pc etc. Hence choice (A) is correct.

.box {width: 100px;height: 100px} .box {width: '100px';height: '100px'} .box {width: 100;height: 100}

How can you get an element #div1 fill up its container's width up to the point it doesn't exceed 500px? If the width exceeds 500px then the element should remain in this very value.

Code 1

#div1 {
    width: 100%;
    max-width: 500px;
}

#div1 {
    width: 100%;
    min-width: 500px;
}

The width of #div1 shall not exceed 500px, which means that its max-width will be equal to 500px. Refer to Setting Limits on CSS Dimensions for more info.

Code 1 Code 2

Are both the following code snippets equivalent i.e do they both do the same thing?

Yes No

Is the following CSS code sensible? If not then why?

Yes No; because width and min-width both have the same units and width doesn't denote a variable/relative dimension. No; because min-width comes after width - it has to rather come before it.

What does box-sizing: border-box do when applied to a given element? Carefully read through.

Makes any custom sizing of the element apply to its border box. Makes any padding value not effect the final dimensions of the element. Both A and B

How can you make the section element shown below fill up all of the viewport's width and height and scale relative to it.

section {width: 100%; height: 100%} section {width: 100vw; height: 100vh} section {width: calc(100%); height: calc(100%)}

Determine the width of the article element shown below.

100px 150px 200px

Determine the dimensions of the div element shown below.

100px width, 200px height 150px width, 250px height 230px width, 330px height

Consider the code below. How can you get the .cont elements to fill up half of their container's width.

Using width: 50% Using box-sizing: border-box and width: 50%

CSS Dimensions Quiz

Are you ready?

More courses

Elementary Logic

HTML