Course: CSS

Welcome to the CSS Box Sizing Quiz.

This quiz tests your understanding of box sizing in CSS, which controls how the total width and height of elements are calculated. By default, CSS uses the content-box model, where padding and border are added outside the defined width and height. The border-box model, on the other hand, includes padding and border within the total width and height, making layout calculations easier and more predictable. Understanding box sizing is essential for creating consistent layouts and avoiding unexpected sizing issues in web design. Read the instructions carefully before you begin the quiz.

Quiz Format

• Total Questions: 10

• Difficulty Level: Medium

• Question Type: Multiple Choice

• Each question has one correct answer.

Timing

• Total time limit: 5 minutes

• Answer steadily and avoid spending too much time on any single question.

Scoring

• Each correct answer = +1 point

• No negative marking

• Maximum Score = 10 points

How to Play

• Read each question carefully and review the HTML and CSS code examples provided.

• Understand how the box-sizing property works.

• Learn the difference between content-box and border-box.

• Focus on how padding and borders affect element size.

• Observe how box sizing impacts layout design.

• Identify correct and incorrect usage of box-sizing.

• Pay attention to common layout issues and fixes.

• Understand why border-box is widely used in modern CSS.

• Choose the option that best represents correct CSS box sizing behavior.

• Once you move to the next question, you cannot return to previous ones.

Rules

• Do not refresh or close the quiz window during the attempt.

• Avoid using notes, books, or online references.

• Keep track of the remaining time during the quiz.

Before You Start

• You can revise the topic here: CSS Box Sizing Tutorial

After Submission

• Your score will be displayed instantly.

• Review the correct answers to understand mistakes.

• This will help you confidently manage element sizing in CSS.