Bird
Raised Fist0
CSSmarkup~5 mins

Box model calculation 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 helps you understand how the size of elements on a webpage is calculated. It shows how content, padding, borders, and margins add up to the total space an element takes.

When you want to control the exact size of a box on your webpage.
When you need to add space inside or outside an element without changing its content size.
When you want to avoid elements overlapping or leaving too much empty space.
When you want to create neat layouts that look good on all screen sizes.
Syntax
CSS
Total width = content width + left padding + right padding + left border + right border + left margin + right margin
Total height = content height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

The content is the actual area where text or images appear.

Padding adds space inside the box, around the content.

Examples
This example shows how each part adds to the total width.
CSS
content width: 200px
padding: 10px
border: 5px solid
margin: 20px

Total width = 200 + 10 + 10 + 5 + 5 + 20 + 20 = 270px
Here, vertical sizes add up similarly to horizontal sizes.
CSS
content height: 100px
padding-top: 15px
padding-bottom: 15px
border-top: 2px solid
border-bottom: 2px solid
margin-top: 10px
margin-bottom: 10px

Total height = 100 + 15 + 15 + 2 + 2 + 10 + 10 = 154px
Sample Program

This example shows a blue box with specific content width and height. Padding, border, and margin add space around it. The box-sizing: content-box; means the width and height apply only to the content area.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model Calculation Example</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid #333;
      margin: 15px;
      background-color: #a0c4ff;
      box-sizing: content-box;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <article>
        <div class="box" aria-label="Blue box showing box model example">
          This box has content width 200px, padding 20px, border 5px, and margin 15px.
        </div>
      </article>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Remember, box-sizing: content-box; means width and height only count the content area.

If you use box-sizing: border-box;, padding and border are included inside the width and height.

Margins do not affect the size of the box but add space outside it.

Summary

The box model adds content, padding, border, and margin to calculate total element size.

Padding adds space inside the box; margin adds space outside.

Understanding this helps you control layout and spacing on your webpage.

Practice

(1/5)
1. Which parts of the CSS box model add space inside the element's border?
easy
A. Margin and padding
B. Padding and content
C. Margin and border
D. Border and margin

Solution

  1. Step 1: Understand box model parts

    The box model has content, padding, border, and margin. Padding is inside the border, margin is outside.

  2. Step 2: Identify inside spaces

    Padding adds space inside the border, content is inside padding. Margin is outside the border.

  3. Final Answer:

    Padding and content -> Option B

  4. Quick Check:

    Inside space = padding + content [OK]
Hint: Padding is inside border; margin is outside [OK]
Common Mistakes:
  • Confusing margin as inside space
  • Thinking border adds inside space
  • Mixing padding with margin
2. Given this CSS, what is the total width of the element?
width: 200px; padding: 10px; border: 5px solid; margin: 20px;
easy
A. 250px
B. 270px
C. 270px plus margin
D. 250px plus margin

Solution

  1. Step 1: Calculate width including padding and border

    Width = content width (200px) + padding left+right (10px*2=20px) + border left+right (5px*2=10px) = 230px.

  2. Step 2: Add margin outside the box

    Margin left+right = 20px*2 = 40px. Total space taken horizontally = 230px + 40px = 270px.

  3. Final Answer:

    270px plus margin -> Option C

  4. Quick Check:

    Total width = content + padding + border + margin [OK]
Hint: Add padding and border twice, margin outside [OK]
Common Mistakes:
  • Forgetting to double padding and border for both sides
  • Including margin inside width
  • Adding margin only once
3. What is the total height of this element including padding and border?
height: 150px; padding: 15px 10px; border: 3px solid;
medium
A. 186px
B. 150px
C. 176px
D. 181px

Solution

  1. Step 1: Calculate vertical padding and border

    Padding top+bottom = 15px * 2 = 30px. Border top+bottom = 3px * 2 = 6px.

  2. Step 2: Add padding and border to content height

    Total height = content height (150px) + padding (30px) + border (6px) = 186px.

  3. Final Answer:

    186px -> Option A

  4. Quick Check:

    Total height = content + padding + border [OK]
Hint: Add vertical padding and border twice to height [OK]
Common Mistakes:
  • Using horizontal padding values for vertical calculation
  • Forgetting to double padding and border
  • Ignoring border size
4. This CSS code is meant to create a box 300px wide including padding and border. What is wrong?
width: 300px; padding: 20px; border: 10px solid;
medium
A. The box will be wider than 300px
B. The box will be exactly 300px wide
C. Padding and border are ignored in width
D. The box will be narrower than 300px

Solution

  1. Step 1: Calculate total width with padding and border

    Content width is 300px, but padding adds 20px*2=40px and border adds 10px*2=20px, total 360px.

  2. Step 2: Understand box-sizing default

    By default, width sets content box only, so padding and border add outside, making box wider than 300px.

  3. Final Answer:

    The box will be wider than 300px -> Option A

  4. Quick Check:

    Default box-sizing excludes padding and border [OK]
Hint: Width excludes padding and border unless box-sizing set [OK]
Common Mistakes:
  • Assuming width includes padding and border by default
  • Ignoring box-sizing property
  • Not doubling padding and border
5. You want a box with total width 400px including padding and border. Padding is 15px and border is 5px. What should the CSS width be if box-sizing: content-box;?
hard
A. 430px
B. 400px
C. 350px
D. 360px

Solution

  1. Step 1: Calculate total padding and border width

    Padding left+right = 15px * 2 = 30px. Border left+right = 5px * 2 = 10px. Total extra = 40px.

  2. Step 2: Subtract padding and border from total width

    Desired total width = 400px. Content width = 400px - 40px = 360px.

  3. Step 3: Confirm CSS width value

    Set width: 360px; to get total 400px box size with content-box sizing.

  4. Final Answer:

    360px -> Option D

  5. Quick Check:

    width = total - (padding + border) [OK]
Hint: Subtract padding and border from total width [OK]
Common Mistakes:
  • Adding padding and border instead of subtracting
  • Forgetting to double padding and border
  • Confusing content-box with border-box