Width and Height

In the last lesson you learned about CSS Border, the line that runs around the edge of a box. Now let’s look at how to set how wide and how tall that box should be.

📦 What are Width and Height?

Every element on a web page sits inside a box. You get to decide how big that box is. That is what width and height are for.

• width sets how wide the box is, from left to right.
• height sets how tall the box is, from top to bottom.

Think of a photo frame on a wall. You pick how wide the frame is and how tall it is. The picture then fits inside that size. Here the box is the frame and your content is the picture.

The key idea is width. It is the side-to-side size of an element’s box.

✍️ The Basic Syntax

You write width and height like any other CSS rule. You give a number and then a unit.

Here is a box that is 300 pixels wide and 150 pixels tall.

.card {
  width: 300px;
  height: 150px;
  background-color: lightblue;
}

So what is happening here?

• width: 300px; makes the box 300 pixels wide.
• height: 150px; makes the box 150 pixels tall.
• px means pixels. A pixel is one tiny dot on the screen.

📏 Common Units You Can Use

You do not have to use pixels. CSS gives you a few handy units. Here are the ones you will use most.

A percent value is very common, so let me show it. This box takes up half the width of whatever holds it.

.half-box {
  width: 50%;
  height: 200px;
  background-color: lightgreen;
}

Now if the parent box gets bigger or smaller, this box grows and shrinks with it. That is the nice thing about %. This is the idea of being responsive, which means the layout changes to fit different screen sizes.

🤔 Why Not Always Use Pixels?

You might ask, why not just set a pixel width every time? Here is the problem.

• Phones have small screens. Laptops have big screens.
• A box that is 800px wide looks fine on a laptop. But on a phone it is wider than the screen. So part of it gets cut off.
• A % width or a vw width fixes this. The box stays inside the screen on every device.

So for things that should fit different screens, percent is often the safer choice. For small fixed things like a button or an icon, pixels are fine.

🌐 A Real Example: A Profile Card

Let’s build something you actually see on real sites. A profile card is the small box that shows a person’s name and role, like on a YouTube channel page or an About Us page.

First the HTML for the card.

<div class="profile">
  <h2>Alex Carter</h2>
  <p>Web Developer</p>
</div>

Now the CSS that gives it a clear size.

.profile {
  width: 250px;
  height: 120px;
  background-color: #f0f0f0;
  border: 2px solid #333;
}

Let me walk through it.

• width: 250px; keeps the card the same neat width every time.
• height: 120px; keeps it short, so it does not stretch down the page.
• The border draws a line around it, so you can clearly see the box edges.

🧱 max-width and min-width

Sometimes you do not want one exact size. You want a limit instead. CSS lets you set a top limit and a bottom limit too.

• max-width sets the biggest the box is allowed to get.
• min-width sets the smallest the box is allowed to get.

This is the idea of max-width. It is the largest width a box can reach, even when there is more room.

A very common pattern uses width: 100% together with max-width. The box fills the screen on a phone. But it never grows wider than your limit on a big screen.

.container {
  width: 100%;
  max-width: 600px;
}

So on a small phone the box is full width. On a wide laptop it stops growing at 600 pixels and sits in the middle. You get the best of both.

⚠️ Common Mistakes

A few things trip up beginners with width and height. Watch out for these.

• Forgetting the unit. Writing width: 300; does nothing. You need width: 300px;.
• Setting a fixed height on text boxes. If the text is long, it spills out of the box. Often it is better to leave height alone and let the content decide.
• Using a big pixel width like 1000px on a page. It looks broken on phones. Use % or max-width instead.

✅ Best Practices

Keep these simple habits and your boxes will behave well.

• Use % or max-width for boxes that should fit different screen sizes.
• Use px for small fixed things like icons and buttons.
• Be careful with a fixed height. Let text grow on its own when you can.
• Pair width: 100% with max-width for a layout that works on phones and laptops.

🧩 What You’ve Learned

You now know how to control the size of a box. Here is the quick recap.

• ✅ width sets side-to-side size and height sets top-to-bottom size.
• ✅ You can use px, %, vw, and vh as units, and you must always add a unit.
• ✅ % and vw make boxes responsive, so they fit different screens.
• ✅ max-width and min-width set limits instead of one exact size.
• ✅ Be careful with a fixed height on text, because long text can spill out.

🚀 What’s Next?

Next you will learn how the browser adds up width, padding, and border to get the real size of a box, and how to make that easier to manage.

Box Sizing