Bird
Raised Fist0
CSSmarkup~5 mins

Common box model issues in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
The box model controls how elements take up space on a webpage. Understanding common issues helps you fix layout problems easily.
When elements are bigger or smaller than expected on the page.
When padding or borders make your layout break or overflow.
When you want consistent spacing and sizing across different browsers.
When you notice unexpected scrollbars or overlapping content.
When you want to control how width and height include padding and borders.
Syntax
CSS
/* Box model properties example */
.element {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* or border-box */
}
The box-sizing property changes how width and height are calculated.
By default, box-sizing is content-box, which excludes padding and border from width and height.
Examples
Padding and border add to the width, so total width is 200 + 20*2 + 5*2 = 250px.
CSS
.box1 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}
Padding and border are included inside 200px width, so the box stays 200px wide.
CSS
.box2 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}
Using border-box with 100% width keeps the element inside its container without overflow.
CSS
.box3 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
Sample Program
This example shows two boxes inside containers of 200px width. The first uses content-box, so the box is wider than the container and may overflow. The second uses border-box, so it fits perfectly inside the container.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Box Model Issues Example</title>
  <style>
    .container {
      width: 200px;
      background-color: #f0f0f0;
      margin-bottom: 1rem;
    }
    .content-box {
      width: 200px;
      padding: 20px;
      border: 5px solid #333;
      box-sizing: content-box;
      background-color: #cce5ff;
    }
    .border-box {
      width: 200px;
      padding: 20px;
      border: 5px solid #333;
      box-sizing: border-box;
      background-color: #d4edda;
    }
  </style>
</head>
<body>
  <section class="container">
    <h2>Content-box (default)</h2>
    <div class="content-box">Box with content-box sizing</div>
  </section>
  <section class="container">
    <h2>Border-box</h2>
    <div class="border-box">Box with border-box sizing</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes
Using box-sizing: border-box; is a common way to avoid unexpected size issues.
Padding and border add to the size in content-box, so plan your widths carefully.
Test your layout on different screen sizes to catch box model problems early.
Summary
The CSS box model controls element size including content, padding, border, and margin.
box-sizing changes how width and height are calculated.
Using border-box often prevents layout problems caused by padding and borders.

Practice

(1/5)
1. Which CSS property controls how the total width and height of an element are calculated, including padding and border?
easy
A. display
B. box-sizing
C. position
D. float

Solution

  1. Step 1: Understand the box model components

    The box model includes content, padding, border, and margin, which affect element size.

  2. Step 2: Identify the property that changes size calculation

    box-sizing changes whether width/height include padding and border or not.

  3. Final Answer:

    box-sizing -> Option B

  4. Quick Check:

    Property controlling size calculation = box-sizing [OK]
Hint: Remember: box-sizing controls total element size calculation [OK]
Common Mistakes:
  • Confusing box-sizing with display or position
  • Thinking margin affects width calculation
  • Assuming float changes box size
2. Which of the following is the correct CSS syntax to make an element's width include its padding and border?
easy
A. box-sizing: border-box;
B. box-sizing: content-box;
C. box-model: border-box;
D. box-sizing: padding-box;

Solution

  1. Step 1: Recall the box-sizing values

    content-box excludes padding and border; border-box includes them.

  2. Step 2: Identify correct syntax

    The correct property is box-sizing and the value to include padding and border is border-box.

  3. Final Answer:

    box-sizing: border-box; -> Option A

  4. Quick Check:

    Include padding and border = border-box [OK]
Hint: Use box-sizing: border-box to include padding and border [OK]
Common Mistakes:
  • Using incorrect property name like box-model
  • Confusing content-box with border-box
  • Using non-existent value padding-box
3. Given this CSS: 
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}
What will be the total width of the div element as seen in the browser?
medium
A. 250px plus padding and border
B. 250px
C. 250px plus margin
D. 200px

Solution

  1. Step 1: Understand content-box sizing

    With content-box, width is only content width; padding and border add outside it.

  2. Step 2: Calculate total width

    Total width = content width (200px) + left/right padding (20px + 20px) + left/right border (5px + 5px) = 200 + 40 + 10 = 250px.

  3. Final Answer:

    250px plus padding and border -> Option A

  4. Quick Check:

    content-box adds padding and border outside width [OK]
Hint: content-box excludes padding/border from width [OK]
Common Mistakes:
  • Assuming width includes padding and border with content-box
  • Adding margin instead of border/padding
  • Calculating only one side of padding or border
4. You have this CSS: 
p {
  width: 300px;
  padding: 10px;
  border: 2px solid blue;
  box-sizing: border-box;
}
But the paragraph still overflows its container. What is the most likely cause?
medium
A. The box-sizing property is misspelled
B. Padding and border are not included in width with border-box
C. The container has less than 300px width
D. Width property is ignored with border-box

Solution

  1. Step 1: Verify box-sizing effect

    border-box includes padding and border inside the width, so width 300px is total size.

  2. Step 2: Consider container size

    If the container is narrower than 300px, the paragraph will overflow despite correct box-sizing.

  3. Final Answer:

    The container has less than 300px width -> Option C

  4. Quick Check:

    Container smaller than element causes overflow [OK]
Hint: Check container width if element overflows with border-box [OK]
Common Mistakes:
  • Thinking border-box excludes padding and border
  • Assuming box-sizing is misspelled without checking
  • Believing width is ignored with border-box
5. You want a fixed width box of exactly 400px including padding and border. Which CSS setup achieves this correctly?
hard
A. width: 400px; padding: 20px; border: 5px solid; box-sizing: content-box;
B. width: 430px; padding: 20px; border: 5px solid; box-sizing: content-box;
C. width: 350px; padding: 20px; border: 5px solid; box-sizing: border-box;
D. width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box;

Solution

  1. Step 1: Understand box-sizing impact

    With border-box, width includes padding and border, so width: 400px means total size is 400px.

  2. Step 2: Check each option

    width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box; uses border-box with width 400px, so total box size is exactly 400px including padding and border.

  3. Final Answer:

    width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box; -> Option D

  4. Quick Check:

    border-box + width = total size fixed [OK]
Hint: Use border-box to fix total box size including padding and border [OK]
Common Mistakes:
  • Using content-box and expecting width to include padding/border
  • Adjusting width manually without box-sizing
  • Ignoring border thickness in calculations