• 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 Height/Width

← Previous Next →

🔹 What Are CSS Height and Width?

The height and width properties in CSS are used to define the size of an element’s content area.

By default, padding, borders, and margins are not included in height and width (unless you use box-sizing: border-box).

🔸 Syntax

element {
  width: 300px;
  height: 150px;
}

🔸 Units You Can Use

  • Pixels (px)

  • Percent (%)

  • View Width (vw)

  • View Height (vh)

  • em, rem, etc.

🔸 Width and Height Values

Value Description
auto Default. The browser calculates it
px Fixed size in pixels
% Percentage of the containing element
max-content Size based on the longest content
min-content Smallest size the content fits into

🔸 Setting Max and Min

You can also use:

max-width: 500px;
min-width: 200px;

max-height: 300px;
min-height: 100px;

✅ Prevents the element from shrinking too small or growing too large.

🔸 box-sizing: border-box

To include padding and border in the width/height:

* {
  box-sizing: border-box;
}

✅ Ensures your element doesn’t overflow due to padding and border.

Practice Questions

Q1. Set the width of a <div> to 400px.

Q2. Make a <section> have a height of 200px.

Q3. Set the width of a container to 50% of the page.

Q4. Add min-width: 300px and max-width: 800px to a .card.

Q5. Create a responsive box with width 80vw and height 50vh.

Q6. Prevent an image from exceeding 100% of its parent width.

Q7. Set the height of a <textarea> to 150px and width to 100%.

Q8. Write a rule to limit a div’s height to 500px but not less than 300px.

Q9. Apply box-sizing: border-box to all elements on the page.

Q10. Use inline CSS to set width: 200px for a paragraph.

CSS Height/Width Quiz

Q1: Which CSS property sets the horizontal size of an element?

A. length
B. width
C. margin
D. border

Q2: What is the default value of the width property?

A. 0
B. auto
C. 100px
D. fit-content

Q3: Which unit is relative to the size of the parent element?

A. px
B. vw
C. %
D. em

Q4: What does box-sizing: border-box; do?

A. Adds padding to width
B. Includes padding and border in width/height
C. Excludes margins from layout
D. Centers the element

Q5: Which value makes the width equal to the entire screen width?

A. width: 100px
B. width: 100vw
C. width: auto
D. width: 100%

Q6: How can you restrict the minimum width of an element?

A. width-min
B. min-width
C. limit-width
D. limit-width

Q7: What does width: 50%; mean?

A. Width is 50px
B. Width is 50% of viewport
C. Width is 50% of parent container
D. Width is 50% of screen resolution

Q8: What happens if content is larger than fixed height and no overflow is set?

A. Content is hidden
B. Content overflows
C. Height increases automatically
D. Content shrinks

Q9: Which is correct for responsive width?

A. width: 500px;
B. width: auto;
C. width: 80vw;
D. width: max;

Q10: Which property is used to set the maximum height of an element?

A. max-height
B. height-max
C. limit-height
D. height: max;
← Previous Next →
Login
Go Back Top