CSS Box Model Quiz

Test your understanding of the CSS box model, including padding, margin, and border properties.

Question 1/10

Given the code below, will the child container stick out of the parent container, or will the child container sit within the parent's boundary? 
<div class="parent">
    Parent Container
    <div class="child">Child container</div>
</div>

<style>
    div {
        box-sizing: content-box;
        padding: 20px;
        border: 1px solid black;
    }

    .parent {
        width: 200px;
    }

    .child {
        width: 100%;
    }
</style>

Question 2/10

Is margin applied to empty elements?

Question 3/10

Given the code below, will the child container stick out of the parent container, or will the child container sit within the parent's boundary? 
<div class="parent">
    Parent Container
    <div class="child">Child container</div>
</div>

<style>
    div {
        box-sizing: content-box;
        padding: 20px;
        border: 1px solid black;
    }

    .parent {
        width: 200px;
    }
</style>

Question 4/10

Every element on a web page is represented by the browser as a rectangular box

Question 5/10

Is box-sizing inherited?

Question 6/10

How does the browser deal with absolutely positioned elements with no explicit width defined?

Question 7/10

What will the following code output? 
<style>
  div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid black;
  }
</style>
<div>This div has a width of 200 pixels</div>

Question 8/10

Margin is included as part of the element's total width if you set the element's box-sizing to border-box

Question 9/10

What will be the total space in pixels between box one and box two from the code below? 
<div class="one">Box one</div>
<div class="two">Box two</div>

<style>
    div {
        box-sizing: border-box;
        padding: 20px;
        border: 1px solid black;
        width: 200px;
        height: 200px;
    }

    .one {
        margin-bottom: 100px;
    }

    .two {
        margin-top: 110px;
    }
</style>

Question 10/10

What is the initial/default value of the CSS property box-sizing?
You did not answer any questions correctly.

Your Answers

Question 1/10

Given the code below, will the child container stick out of the parent container, or will the child container sit within the parent's boundary? 
<div class="parent">
    Parent Container
    <div class="child">Child container</div>
</div>

<style>
    div {
        box-sizing: content-box;
        padding: 20px;
        border: 1px solid black;
    }

    .parent {
        width: 200px;
    }

    .child {
        width: 100%;
    }
</style>

content-box gives you the default CSS box-sizing behavior. If you set the child element's width to 100%, then the element's content box will be 100% of the parent container, and the width of any border or padding will be added to the final rendered width, making the element wider than 100% of the parent container.

Question 2/10

Is margin applied to empty elements?

When an element has no content, but has a top or bottom margin, that margin will collapse with any adjacent margins.

Question 3/10

Given the code below, will the child container stick out of the parent container, or will the child container sit within the parent's boundary? 
<div class="parent">
    Parent Container
    <div class="child">Child container</div>
</div>

<style>
    div {
        box-sizing: content-box;
        padding: 20px;
        border: 1px solid black;
    }

    .parent {
        width: 200px;
    }
</style>

Because we didn't declare a width on our child element, the browser gives the child element a width of 100% but will push the child inward to account for the padding of the parent container. If we give the child an explicit width of 100% and assign box-sizing a value of content-box, then the child element will break through the parent's container.

Question 4/10

Every element on a web page is represented by the browser as a rectangular box

True, every element on a web page is represented by the browser as a rectangular box. The CSS Box Model is used to define the layout and dimensions of these rectangular boxes, which consist of four main parts: the content area, padding area, border area, and margin area.

When the browser renders an HTML document, it creates a rectangular box for each element based on its dimensions and properties specified in the CSS stylesheet. These boxes are positioned on the web page according to their display and positioning properties.

Even elements that are not typically thought of as rectangular, such as images, are rendered by the browser as rectangular boxes with the image content as the box's content area.

So, every element on a web page is essentially a rectangular box, regardless of its actual shape or content.

Question 5/10

Is box-sizing inherited?

By default, box-sizing is not inherited. This means if you set the box-sizing value for a parent element, the child element will not inherit that value. Developers take different approaches to set site-wide box-sizing values.

Here's a possible option:

*, *:before, *:after {
  box-sizing: border-box;
}

And a second approach:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Question 6/10

How does the browser deal with absolutely positioned elements with no explicit width defined?

If an absolutely positioned box does not have a width specified in CSS, it will only be as wide as necessary to contain its content, which can sometimes result in unexpected behavior. For example, if the box only contains a single word, its width will be the same as the width of that word when it is rendered on the page.

Question 7/10

What will the following code output? 
<style>
  div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid black;
  }
</style>
<div>This div has a width of 200 pixels</div>

The box-sizing: border-box; property causes the width of the element to include the padding and border, resulting in a total width of 200 pixels.

Question 8/10

Margin is included as part of the element's total width if you set the element's box-sizing to border-box

The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box

Question 9/10

What will be the total space in pixels between box one and box two from the code below? 
<div class="one">Box one</div>
<div class="two">Box two</div>

<style>
    div {
        box-sizing: border-box;
        padding: 20px;
        border: 1px solid black;
        width: 200px;
        height: 200px;
    }

    .one {
        margin-bottom: 100px;
    }

    .two {
        margin-top: 110px;
    }
</style>

Since both boxes have margin applied in the same region, the greater margin value (in our case, box two) will win. This is called margin collapse. Margin collapse occurs in CSS when the margins of adjacent elements collapse into each other, creating unexpected layout issues. This happens when the top and bottom margins of two adjacent elements touch each other, and the margin size of the two elements is not equal.

Question 10/10

What is the initial/default value of the CSS property box-sizing?

The default value of the CSS property box-sizing is content-box. This means that the width and height of an element only include its content, and not its padding, border, or margin. If you want the width and height of an element to include its padding and border, you can set the value of box-sizing to border-box.

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know. Start quiz

Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions. Start quiz

CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations. Start quiz

CSS Grid Quiz

Test your knowledge of CSS Grid with this quiz, covering topics such as grid properties, layout creation, and positioning of grid items. Start quiz