• 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 Model

← Previous Next →

🔹 What is the CSS Box Model?

Every HTML element can be considered as a box in CSS. The CSS Box Model describes how these boxes are rendered and how space is added around elements.

The box model consists of the following areas:

  1. Content – The actual text or image inside the element

  2. Padding – Space between the content and the border

  3. Border – The outline surrounding the padding

  4. Margin – Space outside the border, between this and other elements

🔸 Visual Representation:

|  Margin   |
| --------- |
|  Border   |
| --------- |
|  Padding  |
| --------- |
|  Content  |

🔸 Box Model Structure

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

  • Width applies only to the content.

  • Padding, border, and margin expand the element’s total space.

🔸 Total Width and Height Formula

Total width = content width + left/right padding + left/right border + left/right margin
Total height = content height + top/bottom padding + top/bottom border + top/bottom margin

🔸 Box-Sizing Property

To include padding and border in the width/height of the element:

* {
  box-sizing: border-box;
}

✅ This prevents layout issues and keeps the box size predictable.

Practice Questions

Q1. Create a <div> with 300px width and 20px padding.

Q2. Add a 5px solid red border around all paragraphs.

Q3. Set a 15px margin around a container div.

Q4. Write CSS to apply 10px padding and 5px margin to all headings.

Q5. Use the box-sizing property to include padding and border in the element’s width.

Q6. Write a rule that sets a 2px dotted green border for an image.

Q7. Apply 25px top and bottom margin and 10px left and right padding to a section.

Q8. Set different border styles for each side of a box (top, right, bottom, left).

Q9. Create a CSS class .box that has 10px padding, 3px border, and 15px margin.

Q10. Apply border-box sizing to all elements using the universal selector.

CSS Box Model Quiz

Q1: What does the box model in CSS describe?

A. Layout grid system
B. Positioning system
C. Element rendering box
D. Text alignment system

Q2: Which is the correct order from inside to outside in the box model?

A. Border → Padding → Margin → Content
B. Content → Padding → Border → Margin
C. Margin → Border → Padding → Content
D. Padding → Margin → Border → Content

Q3: What is included in the box-sizing: border-box; model?

A. Only content
B. Content + margin
C. Content + padding + border
D. Content + margin + padding

Q4: Which property adds space inside an element, between content and border?

A. margin
B. padding
C. spacing
D. border

Q5: What adds space outside the element’s border?

A. padding
B. margin
C. spacing
D. width

Q6: What property sets the visible edge of an element?

A. border
B. padding
C. outline
D. frame

Q7: Which CSS property affects the space around elements but not the content?

A. width
B. padding
C. margin
D. font-size

Q8: What happens if box-sizing: border-box; is not used?

A. Padding and border are subtracted from width
B. Padding and border are ignored
C. Width includes padding and border
D. Width adds padding and border to content

Q9: How do you apply the box model rule to all elements?

A. all {}
B. * { box-sizing: border-box; }
C. html { border-box: true; }
D. body { box-model: on; }

Q10: Which part of the box model does border: 1px solid black; affect?

A. Content
B. Margin
C. Border
D. Padding
← Previous Next →
Login
Go Back Top