Width, Height & Units — Web Development Class 25

Class 025 — Width, Height & Units

CSS width, height and measurement units are fundamental for controlling the size of elements on a webpage.

Every website contains elements such as containers, sections, images, buttons, cards and text blocks. CSS allows developers to control their dimensions using properties such as width, height, min-width, max-width, min-height and max-height.

In this class, you will learn:

• width
• height
• min-width
• max-width
• min-height
• max-height
• CSS units
• px
• %
• em
• rem
• vw
• vh
• auto
• Relative vs absolute units
• Practical responsive sizing

LEARNING OBJECTIVES

After completing this class, you will be able to:

• Set the width of HTML elements.
• Set the height of HTML elements.
• Use minimum and maximum dimensions.
• Understand common CSS measurement units.
• Understand the difference between fixed and relative sizing.
• Use px correctly.
• Use percentages for relative sizing.
• Understand em and rem.
• Use viewport units such as vw and vh.
• Create flexible containers.
• Avoid common width and height mistakes.

WHAT IS WIDTH?

The width property controls the width of an element.

Syntax:

selector {
width: value;
}

Example:

.box {
width: 300px;
}

HTML:

This is a box.

CSS:

.box {
width: 300px;
background-color: lightblue;
}

The box is given a width of 300 pixels.

WIDTH WITH PERCENTAGE

Example:

.container {
width: 80%;
}

A percentage width is generally calculated relative to the width of the containing block.

Example:

<div class="child">
    Child Element
</div>

CSS:

.parent {
width: 800px;
}

.child {
width: 50%;
}

The child takes 50% of the relevant containing width.

WHAT IS HEIGHT?

The height property controls the height of an element.

Syntax:

selector {
height: value;
}

Example:

.box {
height: 200px;
}

Complete example:

.box {
width: 300px;
height: 200px;
background-color: lightgreen;
}

WIDTH AND HEIGHT TOGETHER

Example:

.card {
width: 350px;
height: 250px;
background-color: white;
}

This sets both dimensions of the card.

AUTO

The keyword:

auto

allows the browser to calculate a dimension according to normal layout rules.

Example:

.box {
width: auto;
}

For many block-level elements, width: auto allows the element to use the available space according to its layout context.

HEIGHT: AUTO

Example:

.card {
height: auto;
}

This allows the height to adjust according to the content.

For content-based sections and cards, allowing height to remain automatic is often safer than forcing a fixed height.

FIXED HEIGHT PROBLEM

Consider:

.card {
height: 100px;
}

If the card contains more content than fits inside that height, the content may overflow.

For this reason, fixed heights should be used carefully.

MIN-WIDTH

The min-width property defines the minimum width an element is allowed to have.

Example:

.box {
min-width: 300px;
}

This means the used width should not become smaller than the specified minimum under normal sizing rules.

MAX-WIDTH

The max-width property limits how wide an element can become.

Example:

.container {
width: 90%;
max-width: 1200px;
}

This is a very common responsive layout pattern.

The container can use 90% of the available width but will not grow beyond 1200px.

PRACTICAL CONTAINER

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

This pattern is commonly used to create a centered content container.

You will study margin in detail in Class 26.

MIN-HEIGHT

The min-height property sets a minimum height.

Example:

.hero {
min-height: 500px;
}

The section can grow taller if its content requires more space.

MIN-HEIGHT VS HEIGHT

Example:

.hero {
height: 500px;
}

This explicitly sets the height.

Example:

.hero {
min-height: 500px;
}

This establishes a minimum while still allowing the element to become taller when necessary.

For many content sections, min-height is more flexible.

MAX-HEIGHT

The max-height property limits the maximum height of an element.

Example:

.box {
max-height: 300px;
}

If the content requires more space, overflow behavior becomes important.

You will learn more about overflow later in the CSS section.

WHAT ARE CSS UNITS?

CSS units are used to express measurements.

Examples:

10px
50%
2em
2rem
100vw
100vh

Different units behave differently.

Choosing the correct unit is important for responsive web design.

CSS UNIT CATEGORIES

CSS units can broadly be discussed as:

1. Absolute length units
2. Relative length units

For beginner web development, the most important units include:

px
%
em
rem
vw
vh

PX UNIT

px means:

Pixel

Example:

.box {
width: 300px;
}

Another example:

p {
font-size: 18px;
}

px is commonly used when you want a specific CSS pixel measurement.

PX EXAMPLES

border-width: 1px;

font-size: 16px;

max-width: 1200px;

height: 300px;

WHEN PX IS USEFUL

px is commonly useful for:

• Borders
• Small precise dimensions
• Maximum container widths
• Certain spacing values
• Some font sizes
• UI details

Responsive websites can still use px where appropriate. The important point is to choose units based on the behavior you need.

PERCENTAGE UNIT

Percentage is written using:

%

Example:

.container {
width: 90%;
}

Another example:

.image {
width: 100%;
}

Percentage dimensions are relative to a relevant containing dimension according to the property being used.

RESPONSIVE IMAGE EXAMPLE

img {
max-width: 100%;
height: auto;
}

This is a common pattern that helps images avoid overflowing their container while preserving their aspect ratio.

EM UNIT

em is a relative CSS unit.

For font-size, em is relative to the computed font size of the parent element.

Example:

.parent {
font-size: 20px;
}

.child {
font-size: 1.5em;
}

For the child’s font-size:

1.5em = 1.5 × parent font size

In this example:

1.5 × 20px = 30px

EM FOR OTHER PROPERTIES

When em is used on properties other than font-size, it is generally relative to the font size of the element itself.

Example:

.button {
font-size: 20px;
padding: 0.5em 1em;
}

Here the spacing scales with the button’s font size.

EM COMPOUNDING

Nested font sizes using em can produce compounding effects.

Example:

.parent {
font-size: 1.2em;
}

.child {
font-size: 1.2em;
}

Because each level can depend on its parent, deeply nested structures may become harder to predict.

This is one reason rem is often convenient for consistent typography.

REM UNIT

rem means:

Root em

rem is relative to the root element’s font size.

The root element of an HTML document is:

Example:

html {
font-size: 16px;
}

h1 {
font-size: 2rem;
}

If the root font size is 16px:

2rem = 32px

MORE REM EXAMPLES

html {
font-size: 16px;
}

p {
font-size: 1rem;
}

h2 {
font-size: 2rem;
}

h1 {
font-size: 3rem;
}

With a 16px root size:

1rem = 16px
2rem = 32px
3rem = 48px

EM VS REM

em:

Often depends on the element or parent font size, depending on the property.

rem:

Depends on the root element’s font size.

Example:

html {
font-size: 16px;
}

.parent {
font-size: 20px;
}

.child-one {
font-size: 2em;
}

.child-two {
font-size: 2rem;
}

Result:

.child-one = 40px

.child-two = 32px

VW UNIT

vw means:

Viewport Width

1vw represents 1% of the viewport width.

Example:

.box {
width: 50vw;
}

The box is 50% of the viewport width.

100VW

Example:

.hero {
width: 100vw;
}

This requests a width equal to the full viewport width.

However, normal block elements often do not need width: 100vw, and using it unnecessarily can sometimes contribute to horizontal overflow depending on the layout.

VH UNIT

vh means:

Viewport Height

1vh represents 1% of the viewport height.

Example:

.hero {
min-height: 100vh;
}

This creates a section with a minimum height equal to the viewport height.

FULL-SCREEN HERO EXAMPLE

.hero {
min-height: 100vh;
}

This is commonly used for full-screen-style hero sections.

VW AND VH EXAMPLE

.hero {
width: 100%;
min-height: 100vh;
}

.hero h1 {
font-size: 5vw;
}

The heading size changes relative to viewport width.

Be careful with large viewport-based font sizing because text can become too small or too large on extreme screen sizes.

MODERN RESPONSIVE FONT EXAMPLE

A more controlled approach can use:

clamp()

Example:

.hero h1 {
font-size: clamp(2rem, 5vw, 4rem);
}

This establishes:

Minimum size = 2rem

Preferred responsive size = 5vw

Maximum size = 4rem

ABSOLUTE VS RELATIVE UNITS

A simplified beginner comparison:

Absolute length example:

px

Relative units:

%
em
rem
vw
vh

Example:

.box-one {
width: 300px;
}

.box-two {
width: 80%;
}

The first uses a fixed CSS pixel measurement.

The second adapts relative to its containing context.

WHICH UNIT SHOULD YOU USE?

There is no single unit that should be used everywhere.

A practical approach may be:

px:
Useful for borders and specific dimensions.

%:
Useful for flexible widths.

rem:
Useful for scalable typography and spacing.

em:
Useful when sizing should relate to an element’s font size.

vw:
Useful when a value should relate to viewport width.

vh:
Useful when a value should relate to viewport height.

PRACTICAL RESPONSIVE LAYOUT

HTML:

<meta charset="UTF-8">

<title>CSS Width Height and Units</title>

<link rel="stylesheet" href="style.css">

<section class="hero">

    <div class="container">

        <h1>
            Learn Web Development
        </h1>

        <p>
            Build professional websites from zero to advanced.
        </p>

    </div>

</section>


<section class="content">

    <div class="container">

        <div class="card">

            <h2>
                CSS Course
            </h2>

            <p>
                Learn modern CSS through practical examples.
            </p>

        </div>

    </div>

</section>

CSS:

html {
font-size: 16px;
}

body {
margin: 0;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.hero {
min-height: 100vh;
background-color: #f1f5f9;
}

.hero h1 {
font-size: 3rem;
}

.hero p {
font-size: 1.125rem;
}

.card {
width: 100%;
max-width: 500px;
min-height: 200px;
background-color: white;
}

CODE EXPLANATION

.container {
width: 90%;
max-width: 1200px;
}

The container can adapt to available space while being limited to a maximum width.

.hero {
min-height: 100vh;
}

The hero has a minimum height equal to the viewport height.

.hero h1 {
font-size: 3rem;
}

The heading size is relative to the root font size.

.card {
width: 100%;
max-width: 500px;
}

The card can use the available width but will not grow beyond 500px.

WIDTH: 100% VS 100VW

These are not always equivalent.

width: 100%;

normally relates to the containing block.

width: 100vw;

relates to the viewport width.

For normal content inside containers, 100% is often more appropriate.

MAX-WIDTH FOR TEXT

Long lines of text can be difficult to read.

Example:

.article {
width: 90%;
max-width: 700px;
}

This limits the width of the article content.

MAX-WIDTH FOR IMAGES

Example:

img {
max-width: 100%;
height: auto;
}

This helps images scale down when their container becomes smaller.

MIN-WIDTH WARNING

Example:

.card {
min-width: 500px;
}

On a mobile screen narrower than 500px, this may cause horizontal overflow.

Use large min-width values carefully.

FIXED WIDTH WARNING

Example:

.container {
width: 1200px;
}

This can create problems on screens narrower than 1200px.

A more flexible pattern:

.container {
width: 90%;
max-width: 1200px;
}

FIXED HEIGHT WARNING

Example:

.card {
height: 150px;
}

If the content becomes longer, it may not fit correctly.

A more flexible option may be:

.card {
min-height: 150px;
}

BOX SIZING AND WIDTH

An element’s final rendered size can also be affected by padding and borders.

Example:

.box {
width: 300px;
padding: 20px;
border: 5px solid black;
}

With the default content-box sizing model, the declared width applies to the content box, so padding and borders add to the outer size.

A common pattern is:

• {
  box-sizing: border-box;
  }

Then the declared width includes the content, padding and border within that sizing calculation.

You will study the CSS Box Model in detail in Class 27.

RESPONSIVE DESIGN PRINCIPLE

Avoid thinking only in fixed desktop dimensions.

Instead of:

width: 1000px;

you can often use:

width: 90%;
max-width: 1000px;

This allows the design to adapt better to smaller screens.

COMMON MISTAKES

1. USING FIXED WIDTHS EVERYWHERE

Wrong approach:

.container {
width: 1200px;
}

This may overflow smaller screens.

Better:

.container {
width: 90%;
max-width: 1200px;
}

2. USING FIXED HEIGHT FOR LONG CONTENT

Example:

.article {
height: 200px;
}

Long content may overflow.

Use height: auto or min-height when appropriate.

3. CONFUSING % AND VW

50% and 50vw do not necessarily mean the same thing.

50% depends on a containing context.

50vw depends on viewport width.

4. CONFUSING EM AND REM

em can depend on font-size context.

rem depends on the root font size.

5. LARGE MIN-WIDTH ON MOBILE

Example:

.card {
min-width: 600px;
}

This can force horizontal scrolling on smaller devices.

6. USING 100VW UNNECESSARILY

A normal block-level section often works correctly with:

width: 100%;

Using 100vw without understanding the layout can create overflow in some situations.

7. FORGETTING IMAGE RESPONSIVENESS

Large images may overflow their containers.

A common solution:

img {
max-width: 100%;
height: auto;
}

8. NOT USING MAX-WIDTH

A percentage-based container can become excessively wide on large screens.

Example:

.container {
width: 90%;
max-width: 1200px;
}

9. CONFUSING WIDTH WITH MAX-WIDTH

width defines a preferred/used sizing input according to CSS sizing rules.

max-width places an upper limit on the used width.

10. FORCING BOTH WIDTH AND HEIGHT ON IMAGES

Example:

img {
width: 500px;
height: 500px;
}

This can distort an image if its original aspect ratio is different.

A safer responsive pattern is often:

img {
max-width: 100%;
height: auto;
}

NEW & DIFFICULT WORDS

Width = The horizontal dimension of an element.

Height = The vertical dimension of an element.

min-width = The minimum allowed width of an element.

max-width = The maximum allowed width of an element.

min-height = The minimum allowed height of an element.

max-height = The maximum allowed height of an element.

CSS Unit = A measurement unit used with CSS values.

px = CSS pixel unit.

Percentage (%) = A relative percentage value.

em = A relative unit based on font-size context.

rem = Root em, relative to the root element’s font size.

Viewport = The visible area of a webpage in the browser.

vw = Viewport width unit.

vh = Viewport height unit.

Responsive = Able to adapt to different screen or container sizes.

Fixed Size = A dimension set to a specific measurement.

Relative Unit = A unit whose computed size depends on another measurement.

Containing Block = The reference box used to calculate certain dimensions and positions.

Overflow = Content extending beyond the available area.

Aspect Ratio = The proportional relationship between width and height.

Root Element = The top-level element in an HTML document.

IMPORTANT NOTES

Fixed width:

width: 300px;

Relative width:

width: 80%;

Maximum width:

max-width: 1200px;

Minimum height:

min-height: 500px;

Responsive container:

.container {
width: 90%;
max-width: 1200px;
}

Responsive image:

img {
max-width: 100%;
height: auto;
}

Root-relative font:

font-size: 2rem;

Viewport-height section:

min-height: 100vh;

Controlled responsive font:

font-size:
clamp(2rem, 5vw, 4rem);

PRACTICE

1. Create a box with width: 300px.
2. Create a box with width: 80%.
3. Create a section with height: 300px.
4. Replace height with min-height and add more content.
5. Create a container using:

width: 90%;
max-width: 1200px;

6. Create a responsive image.
7. Create text using em.
8. Create text using rem.
9. Create a section using 100vh.
10. Create a box using 50vw.
11. Compare 50% and 50vw.
12. Compare 2em and 2rem.
13. Test a large min-width on a mobile-sized browser window.
14. Create a responsive heading using clamp().

ASSIGNMENT

Create a webpage called:

CSS Sizing & Units Practice

Your page should contain:

• Header
• Hero section
• Main container
• Article section
• Three cards
• Image
• Call-to-action section
• Footer

Requirements:

• Use width.
• Use height.
• Use min-height.
• Use max-width.
• Use px.
• Use %.
• Use em.
• Use rem.
• Use vw.
• Use vh.
• Create a responsive container.
• Create a responsive image.
• Avoid unnecessary horizontal overflow.

MINI PROJECT

Create a responsive landing page structure.

HTML:

<div class="container">

    <h1>
        Learn Modern Web Development
    </h1>

    <p>
        Build professional and responsive websites.
    </p>

</div>

<div class="container">

    <div class="card">

        <h2>
            HTML
        </h2>

        <p>
            Build the structure of webpages.
        </p>

    </div>

    <div class="card">

        <h2>
            CSS
        </h2>

        <p>
            Design beautiful and responsive websites.
        </p>

    </div>

</div>

CSS:

html {
font-size: 16px;
}

body {
margin: 0;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.hero {
min-height: 100vh;
}

.hero h1 {
font-size: clamp(2rem, 5vw, 4rem);
}

.hero p {
font-size: 1.125rem;
}

.card {
width: 100%;
max-width: 500px;
min-height: 200px;
}

img {
max-width: 100%;
height: auto;
}

QUIZ

1. Which property controls an element’s width?

Answer:

width

2. Which property controls an element’s height?

Answer:

height

3. What does max-width do?

Answer:

It sets an upper limit on the width an element can use.

4. What does min-height do?

Answer:

It sets a minimum height while allowing the element to become taller when necessary.

5. What does px mean?

Answer:

CSS pixel.

6. What does % represent?

Answer:

A percentage relative to the relevant reference size for the property.

7. What is em?

Answer:

A relative CSS unit based on font-size context.

8. What is rem?

Answer:

A relative unit based on the root element’s font size.

9. What does vw mean?

Answer:

Viewport width.

10. What does vh mean?

Answer:

Viewport height.

11. What does 100vh represent?

Answer:

A length equal to 100% of the viewport height.

12. What is the difference between 50% and 50vw?

Answer:

50% is relative to the relevant containing dimension, while 50vw is relative to the viewport width.

13. Why is max-width useful?

Answer:

It prevents an element from growing beyond a specified maximum while still allowing flexible sizing.

14. Why can fixed height cause problems?

Answer:

Content may require more vertical space than the fixed height provides, which can lead to overflow.

INTERVIEW QUESTIONS

Q: What is the difference between width and max-width?

Answer:

width participates in determining an element’s used width, while max-width limits how large that width can become.

Q: What is the difference between height and min-height?

Answer:

height specifies a height according to CSS sizing rules, while min-height establishes a minimum and allows the element to grow when more space is needed.

Q: What is the difference between px and %?

Answer:

px represents a CSS pixel measurement, while % is relative to another relevant size determined by the property and layout context.

Q: What is the difference between em and rem?

Answer:

em uses font-size context that can depend on the element or its parent, while rem is based on the root element’s font size.

Q: What are viewport units?

Answer:

Viewport units are relative to the dimensions of the browser viewport. Examples include vw and vh.

Q: Why is max-width commonly used for containers?

Answer:

It allows a container to remain flexible on smaller screens while preventing it from becoming excessively wide on larger screens.

Q: How can you make an image responsive?

Answer:

A common pattern is:

img {
max-width: 100%;
height: auto;
}

Q: Why should fixed heights be used carefully?

Answer:

Because dynamic content can require more space than the specified height, which may cause overflow or layout problems.

CLASS SUMMARY

In Class 25, you learned CSS Width, Height & Units.

You learned:

• width
• height
• auto
• min-width
• max-width
• min-height
• max-height
• px
• %
• em
• rem
• vw
• vh
• Fixed and relative sizing
• Responsive containers
• Responsive images
• Viewport sizing
• Basic clamp() usage
• Common sizing mistakes

Important responsive container:

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

Responsive image:

img {
max-width: 100%;
height: auto;
}

Full viewport-height section:

.hero {
min-height: 100vh;
}

Responsive heading:

.hero h1 {
font-size: clamp(2rem, 5vw, 4rem);
}

Understanding CSS sizing and units is essential for building layouts that work correctly across different screen sizes.

NEXT CLASS:

Class 026 — Margin & Padding