CSS Box Model Practice Questions with Solutions

By /

Introduction

The CSS Box Model is one of the most important concepts in web development. Every HTML element is treated as a rectangular box made up of content, padding, border, and margin. Understanding the Box Model helps you control spacing, size, and layout more effectively. In this chapter, you’ll practice the CSS Box Model through simple solved questions that are easy to understand, even for beginners. CSS Box Model practice questions with solutions help to understand the concepts.

Question 1: Create a Basic CSS Box Model

Problem Statement

Write CSS to create a <div> with 200px width, 20px padding, 2px solid black border, and 30px margin.

CSS Code

div {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}

Output

The <div> displays:

  • Width: 200px
  • Inner spacing: 20px
  • Border: 2px solid black
  • Outer spacing: 30px

Explanation

  • width defines the content area.
  • padding adds space inside the border.
  • border surrounds the padding.
  • margin creates space outside the border.

Question 2: Add Padding and Border to a Paragraph

Problem Statement

Write CSS to add 15px padding and a 1px solid gray border to all paragraphs.

CSS Code

p {
    padding: 15px;
    border: 1px solid gray;
}

Output

Each paragraph displays with inner spacing and a gray border.

Explanation

  • padding creates space between the text and the border.
  • border adds an outline around the paragraph.
  • The text becomes easier to read.

Question 3: Add Margin Outside a Box

Problem Statement

Write CSS to create a <div> with a 25px margin outside the element.

CSS Code

div {
    margin: 25px;
}

Output

A 25px gap appears around the outside of the <div>.

Explanation

  • margin creates space outside an element.
  • It separates the <div> from nearby elements.
  • Margin does not affect the content inside the element.

Question 4: Increase the Padding Inside a Button

Problem Statement

Write CSS to add 15px vertical padding and 30px horizontal padding to a button.

CSS Code

button {
    padding: 15px 30px;
}

Output

The button becomes larger with extra space around the text.

Explanation

  • The first value (15px) applies to the top and bottom.
  • The second value (30px) applies to the left and right.
  • Larger padding makes buttons easier to click.

Question 5: Create a Card with the Box Model

Problem Statement

Write CSS to create a card with 20px padding, a 1px solid lightgray border, and a 20px margin.

CSS Code

.card {
    padding: 20px;
    border: 1px solid lightgray;
    margin: 20px;
}

Output

The card displays with comfortable inner spacing, a light gray border, and space around it.

Explanation

  • padding keeps the content away from the border.
  • border defines the edge of the card.
  • margin separates the card from surrounding elements.
  • This layout is commonly used for product cards, blog posts, and profile sections.

Question 6: Use box-sizing: border-box

Problem Statement

Write CSS to make a <div> include its padding and border within the specified width.

CSS Code

div {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    box-sizing: border-box;
}

Output

The <div> keeps its total width at 300px, including the padding and border.

Explanation

  • box-sizing: border-box; includes the padding and border inside the specified width.
  • The element does not become wider after adding padding or a border.
  • This property is commonly used in modern responsive layouts.

Question 7: Use box-sizing: content-box

Problem Statement

Write CSS to use the default Box Model behavior for a <div>.

CSS Code

div {
    width: 300px;
    padding: 20px;
    border: 2px solid black;
    box-sizing: content-box;
}

Output

The total width of the <div> becomes greater than 300px because the padding and border are added outside the content width.

Explanation

  • content-box is the default value.
  • The width applies only to the content area.
  • Padding and border increase the total size of the element.

Question 8: Create a Box with Different Padding and Margin Values

Problem Statement

Write CSS to create a <div> with 15px padding and 30px margin.

CSS Code

div {
    padding: 15px;
    margin: 30px;
    border: 1px solid gray;
}

Output

The <div> displays:

  • 15px inner spacing
  • 30px outer spacing
  • 1px solid gray border

Explanation

  • padding creates space inside the border.
  • margin creates space outside the border.
  • Together they improve the spacing and appearance of the element.

Question 9: Style an Image Using the Box Model

Problem Statement

Write CSS to add 10px padding, a 3px solid black border, and 20px margin around an image.

CSS Code

img {
    padding: 10px;
    border: 3px solid black;
    margin: 20px;
}

Output

The image displays with:

  • Inner spacing
  • A black border
  • Space around the image

Explanation

  • Padding creates space between the image and its border.
  • The border highlights the image.
  • Margin separates the image from nearby elements.

Question 10: Create a Profile Card Using the Complete Box Model

Problem Statement

Write CSS to create a profile card with a width of 320px, 20px padding, 2px solid gray border, 25px margin, and border-box sizing.

CSS Code

.profile-card {
    width: 320px;
    padding: 20px;
    border: 2px solid gray;
    margin: 25px;
    box-sizing: border-box;
}

Output

The profile card displays with:

  • 320px total width
  • 20px inner spacing
  • 2px gray border
  • 25px outer spacing

Explanation

  • width sets the total width.
  • padding creates inner spacing.
  • border surrounds the content.
  • margin separates the card from other elements.
  • box-sizing: border-box; keeps the total width fixed at 320px.

Key Takeaways

  • Every HTML element follows the CSS Box Model.
  • The Box Model consists of Content, Padding, Border, and Margin.
  • padding creates space inside an element.
  • border surrounds the content and padding.
  • margin creates space outside the element.
  • box-sizing: border-box; keeps the total width and height under control.
  • Understanding the Box Model is essential for building clean and responsive layouts.

Frequently Asked Questions (FAQs)

1. What is the CSS Box Model?

The CSS Box Model is a layout model where every HTML element is treated as a box consisting of content, padding, border, and margin.

2. What are the four parts of the Box Model?

The four parts are:

  • Content
  • Padding
  • Border
  • Margin

3. What is the difference between content-box and border-box?

content-box applies the width only to the content area, while border-box includes the content, padding, and border within the specified width.

4. Why is box-sizing: border-box; commonly used?

It makes layouts easier to manage because the total width and height remain fixed even after adding padding and borders.

5. Does margin affect the size of an element?

No. Margin creates space outside an element but does not increase its actual content size.

6. Does padding increase the size of an element?

Yes. With the default content-box model, padding increases the total size of the element. With border-box, the padding is included within the specified width and height.

7. Why is the CSS Box Model important?

The Box Model helps you control spacing, alignment, and element sizing, making it easier to create responsive and well-structured web pages.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top