CSS Height and Width Practice Questions with Solutions

By /

Introduction

The CSS height and width properties control the size of HTML elements. They are commonly used to create boxes, images, buttons, cards, and layouts with fixed or responsive dimensions. Understanding these properties is essential for building well-structured web pages. In this chapter, you’ll practice height and width through simple solved questions that are easy for beginners to understand. CSS Height and Width Practice questions with solutions help to understand the concepts.

Question 1: Set the Width of a Div

Problem Statement

Write CSS to set the width of a <div> element to 300px.

CSS Code

div {
    width: 300px;
}

Output

The <div> has a fixed width of 300 pixels.

Explanation

  • width sets the horizontal size of an element.
  • 300px gives the <div> a fixed width.
  • The width remains the same on all screen sizes unless changed.

Question 2: Set the Height of a Div

Problem Statement

Write CSS to set the height of a <div> element to 200px.

CSS Code

div {
    height: 200px;
}

Output

The <div> has a fixed height of 200 pixels.

Explanation

  • height sets the vertical size of an element.
  • 200px creates a fixed height.
  • The content stays inside the defined height unless it overflows.

Question 3: Set Both Height and Width

Problem Statement

Write CSS to create a <div> with a width of 400px and a height of 250px.

CSS Code

div {
    width: 400px;
    height: 250px;
}

Output

The <div> appears with a 400px width and 250px height.

Explanation

  • width controls the horizontal size.
  • height controls the vertical size.
  • Both properties can be used together to define an element’s dimensions.

Question 4: Make an Element Full Width

Problem Statement

Write CSS to make a <section> element take 100% of its parent element’s width.

CSS Code

section {
    width: 100%;
}

Output

The <section> stretches across the full width of its parent element.

Explanation

  • 100% means the element uses all available width inside its parent.
  • Percentage values create flexible layouts.
  • This is commonly used in responsive web design.

Question 5: Create a Square Box

Problem Statement

Write CSS to create a square <div> with a width and height of 150px.

CSS Code

div {
    width: 150px;
    height: 150px;
}

Output

The <div> appears as a 150px × 150px square.

Explanation

  • Equal width and height create a square.
  • This technique is commonly used for icons, cards, and image placeholders.
  • The element keeps the same dimensions on all devices unless responsive styles are added.

Question 6: Set the Width Using Percentage

Problem Statement

Write CSS to set the width of a <div> element to 50% of its parent element.

CSS Code

div {
    width: 50%;
}

Output

The <div> occupies half of the parent element’s width.

Explanation

  • Percentage (%) values create flexible layouts.
  • 50% means the element takes up half of its parent container.
  • This is useful for responsive web pages.

Question 7: Set the Height Using Viewport Height

Problem Statement

Write CSS to make a <section> element occupy the full height of the browser window.

CSS Code

section {
    height: 100vh;
}

Output

The <section> fills the entire height of the browser window.

Explanation

  • vh stands for viewport height.
  • 100vh equals 100% of the browser window’s height.
  • This is commonly used for hero sections and landing pages.

Question 8: Set the Minimum Width

Problem Statement

Write CSS to make sure a <div> is never smaller than 250px wide.

CSS Code

div {
    min-width: 250px;
}

Output

The <div> always remains at least 250px wide, even if the available space becomes smaller.

Explanation

  • min-width sets the minimum allowed width.
  • The element can become wider, but never narrower than 250px.
  • It helps prevent content from becoming too compressed.

Question 9: Set the Maximum Width

Problem Statement

Write CSS to make sure a <div> never becomes wider than 800px.

CSS Code

div {
    max-width: 800px;
}

Output

The <div> can grow, but its width never exceeds 800px.

Explanation

  • max-width limits the maximum width of an element.
  • The element can shrink on smaller screens.
  • This property is widely used to create responsive layouts.

Question 10: Create a Responsive Container

Problem Statement

Write CSS to create a responsive <div> that uses 100% width but never becomes wider than 900px.

CSS Code

div {
    width: 100%;
    max-width: 900px;
}

Output

The <div>:

  • Uses the full available width on smaller screens.
  • Never becomes wider than 900px on larger screens.

Explanation

  • width: 100%; makes the element responsive.
  • max-width: 900px; prevents it from becoming too wide.
  • This combination is commonly used for website containers and content sections.

Key Takeaways

  • width controls the horizontal size of an element.
  • height controls the vertical size of an element.
  • Percentage values (%) help create responsive layouts.
  • vh is useful for setting height relative to the browser window.
  • min-width prevents an element from becoming too narrow.
  • max-width prevents an element from becoming too wide.
  • Combining width: 100% with max-width creates responsive containers.

Frequently Asked Questions (FAQs)

1. What is the difference between width and height in CSS?

The width property controls the horizontal size of an element, while the height property controls its vertical size.

2. What does width: 100%; mean?

It means the element uses the full width of its parent element.

3. What is the difference between px and %?

px creates a fixed size, while % creates a flexible size based on the parent element.

4. What is 100vh in CSS?

100vh means 100% of the browser’s viewport height. It makes an element fill the entire browser window vertically.

5. Why should I use max-width?

max-width prevents an element from becoming too wide on large screens, making layouts easier to read and more responsive.

6. What is the purpose of min-width?

min-width ensures that an element never becomes smaller than the specified width, helping protect the layout.

7. How do I create a responsive container in CSS?

Use a combination of width: 100%; and max-width. This allows the element to shrink on smaller screens while limiting its maximum size on larger screens.

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

Related Posts

Scroll to Top