• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Box Sizing

← Previous Next →

🔹 What is box-sizing in CSS?

By default, when you set the width and height of an element in CSS, it only includes the content area — not padding or border.

The box-sizing property allows you to control how the total width and height of an element is calculated.

🔸 Syntax

element {
  box-sizing: content-box | border-box;
}

🔸 Values of box-sizing

1. content-box (Default)

  • Only the content is included in the width and height.

  • Padding and border are added outside the defined size.

.box1 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

🟢 Total width = 200 + 202 + 52 = 250px

2. border-box

  • Width and height include padding and border.

  • Actual content area shrinks to accommodate them.

.box2 {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

🟢 Total width = exactly 200px

🔸 Why Use border-box?

  • Easier to maintain layout sizes

  • More predictable behavior

  • Commonly used in modern web design

🔸 Example: Comparison

<div class="box1">Content Box</div>
<div class="box2">Border Box</div>

.box1, .box2 {
  width: 200px;
  padding: 20px;
  border: 5px solid;
  margin-bottom: 20px;
}

.box1 {
  box-sizing: content-box;
  border-color: red;
}

.box2 {
  box-sizing: border-box;
  border-color: green;
}

🟢 You'll see that .box1 is larger in total width than .box2.

🔸 Apply border-box to All Elements (Best Practice)

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

✅ This ensures consistent sizing across all elements.

Practice Questions

Q1. Set a <div> to use box-sizing: border-box.

Q2. Create two boxes side by side: one with content-box, one with border-box.

Q3. Apply box-sizing: border-box to all elements globally.

Q4. Prevent box from overflowing its parent due to padding.

Q5. Style an input field that remains same width regardless of padding.

Q6. Create a button with fixed width and consistent padding.

Q7. Add 10px padding and 2px border inside a box with box-sizing: border-box.

Q8. Create a responsive card layout using border-box.

Q9. Apply box-sizing using a class .fixed-box.

Q10. Compare two elements’ total widths with different box-sizing values.

CSS Box Sizing Quiz

Q1: What does box-sizing control?

A. Box shadow
B. Border color
C. Box dimension calculation
D. Display type

Q2: What is the default value of box-sizing?

A. border-box
B. content-box
C. auto
D. initial

Q3: In content-box, the width excludes:

A. Border
B. Padding
C. Both padding and border
D. Content

Q4: In border-box, the width includes:

A. Only content
B. Content + Padding + Border
C. Margin
D. None

Q5: Which box-sizing value is easier for layout control?

A. content-box
B. border-box
C. inherit
D. unset

Q6: How to apply border-box to all elements globally?

A. * { box-sizing: border-box; }
B. body { box-sizing: border-box; }
C. div { box-sizing: content-box; }
D. html { box-sizing: content-box; }

Q7: What happens if you increase padding in content-box?

A. Total box size increases
B. Box shrinks
C. Width reduces
D. Border disappears

Q8: Which of the following is true for border-box?

A. Padding increases total size
B. Border is outside total width
C. Width stays fixed
D. Padding is not allowed

Q9: Which value causes element size to increase with padding?

A. content-box
B. border-box
C. block
D. inline-block

Q10: Which box-sizing value helps avoid layout overflow?

A. content-box
B. border-box
C. static
D. sticky
← Previous Next →
Login
Go Back Top