• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top