CSS Width & Height

Learn how to control element dimensions using CSS width, height, min-width, max-width, min-height, max-height, percentages, viewport units, and responsive sizing techniques.

Introduction

In the previous lesson, you learned how the CSS Box Model calculates the size of every HTML element using content, padding, border, and margin.

Now you will learn how to directly control the dimensions of elements using CSS width and height properties.

Width controls how wide an element is, while height controls how tall an element is.

CSS also provides minimum and maximum dimension properties that allow elements to remain flexible while preventing them from becoming too small or too large.

HTML Element

↓

Read Width Rules

↓

Read Height Rules

↓

Check Minimum Size

↓

Check Maximum Size

↓

Calculate Available Space

↓

Apply Box Model

↓

Render Final Size

Dimensions Control Layout

Cards, containers, images, buttons, sidebars, sections, forms, modals, and entire page layouts depend on properly controlled width and height values.

What are Width and Height?

The width and height properties control the horizontal and vertical dimensions of an element.

Basic Syntax

.box {
    width: 300px;
    height: 150px;
}

Element Dimensions

              300px
       ◄─────────────────►

       ┌─────────────────┐
       │                 │
       │                 │
150px  │      BOX        │
       │                 │
       │                 │
       └─────────────────┘

       Width  = Horizontal Size
       Height = Vertical Size

Property	Controls
width	Horizontal size
height	Vertical size
min-width	Minimum allowed width
max-width	Maximum allowed width
min-height	Minimum allowed height
max-height	Maximum allowed height

Width and Height Are Different Directions

Width controls the horizontal dimension from left to right, while height controls the vertical dimension from top to bottom.

Why Do We Need Them?

Without dimension control, elements depend entirely on their content and surrounding layout.

Element Sizing

Control exactly how wide or tall an element should be.

Responsive Design

Allow elements to adapt to different screen sizes.

Containers

Limit content width for better readability.

Cards

Create consistent component dimensions.

Media

Control image, video, and embedded content sizes.

Full-Screen Layouts

Create sections that fill the browser viewport.

Poor Dimension Control

Content becomes too wide.
Elements overflow containers.
Fixed heights hide content.
Layouts break on smaller screens.

Proper Dimension Control

Content remains readable.
Elements fit available space.
Components grow when needed.
Layouts adapt to screen sizes.

Real-World Analogy

Imagine designing a room.

The width determines how far the room extends from left to right, while the height determines how far it extends from the floor to the ceiling.

Room Measurement	CSS Property
Left-to-right distance	width
Floor-to-ceiling distance	height
Minimum allowed width	min-width
Maximum allowed width	max-width
Minimum allowed height	min-height
Maximum allowed height	max-height

Room Analogy

              WIDTH
       ◄────────────────►

       ┌────────────────┐
       │                │
       │                │
HEIGHT │      ROOM      │
       │                │
       │                │
       └────────────────┘

CSS Element = Room
width       = Room Width
height      = Room Height

The width Property

The width property controls the horizontal size of an element.

Syntax

selector {
    width: value;
}

Value Type	Example
Pixels	width: 300px
Percentage	width: 80%
Viewport width	width: 50vw
Automatic	width: auto
Minimum function	width: min(100%, 800px)
Maximum function	width: max(300px, 50%)
Flexible range	width: clamp(300px, 80%, 1000px)

Example

.box {
    width: 300px;
}

Example 1: Fixed Width

A fixed width uses an absolute value such as pixels.

HTML

<div class="box">
    Fixed Width Box
</div>

CSS

.box {
    width: 400px;

    padding: 20px;

    background: #6c5ce7;
    color: white;
}

Fixed Widths Can Overflow

A fixed width may be wider than a small screen or parent container. Use responsive limits when the element must work across different devices.

The height Property

The height property controls the vertical size of an element.

Syntax

selector {
    height: value;
}

Example

.box {
    height: 200px;
}

Height Is Often Content-Driven

Unlike width, height is frequently left as auto so the element can grow naturally according to its content.

Example 2: Fixed Height

HTML

<div class="box">
    Fixed Height Box
</div>

CSS

.box {
    height: 150px;

    padding: 20px;

    background: #00b894;
    color: white;
}

Be Careful with Fixed Heights

If content becomes taller than a fixed-height element, it may overflow or become hidden depending on the overflow property.

Width and Height Together

Width and height can be used together to define both dimensions of an element.

HTML

<div class="box">
    300 × 150
</div>

CSS

.box {
    width: 300px;
    height: 150px;

    background: #6c5ce7;
    color: white;
}

Dimensions

Width  = 300px
Height = 150px

       ◄────── 300px ──────►

       ┌────────────────────┐
       │                    │
150px  │     300 × 150      │
       │                    │
       └────────────────────┘

The auto Value

The auto value allows the browser to calculate the dimension automatically.

Syntax

.box {
    width: auto;
    height: auto;
}

For many block elements, width: auto allows the element to fill the available horizontal space.

height: auto allows the element to grow according to its content.

HTML

<div class="box">
    This element grows naturally
    according to its content.
</div>

CSS

.box {
    width: auto;
    height: auto;

    padding: 20px;
}

Natural Height Is Usually Better

For text-based components, leaving height as auto is often safer than setting a fixed height.

Percentage Width

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

HTML

<div class="parent">
    <div class="child">
        50% Width
    </div>
</div>

CSS

.parent {
    width: 600px;
}

.child {
    width: 50%;
}

Calculation

Parent Width = 600px

Child Width = 50% of 600px

            = 300px

Percentage Width Depends on the Parent

If the parent width changes, the child percentage width changes automatically.

Percentage Height

Percentage height can be more difficult than percentage width because it usually requires the containing block to have a definite height.

HTML

<div class="parent">
    <div class="child">
        50% Height
    </div>
</div>

CSS

.parent {
    height: 400px;
}

.child {
    height: 50%;
}

Calculation

Parent Height = 400px

Child Height = 50% of 400px

             = 200px

Percentage Height Needs a Reference

If the parent height is auto, a child percentage height may not behave as beginners expect because there may be no definite height to calculate from.

Parent and Child Dimensions

Relative dimensions often depend on the size of the parent element.

CSS

.parent {
    width: 800px;
    height: 400px;
}

.child {
    width: 50%;
    height: 25%;
}

Calculation

Parent:
Width  = 800px
Height = 400px

Child:
Width  = 50% of 800px = 400px
Height = 25% of 400px = 100px

Child Property	Reference
width: 50%	Containing block width
height: 50%	Definite containing block height
max-width: 100%	Containing block width
min-height: 100%	Containing block height when definite

The min-width Property

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

Syntax

.box {
    min-width: 300px;
}

Even if the available space or another width rule tries to make the element smaller, min-width prevents it from shrinking below the specified value.

Example

.button {
    min-width: 160px;

    padding: 12px 24px;
}

Large min-width Values Can Cause Overflow

If min-width is larger than the available screen space, the element may create horizontal scrolling.

The max-width Property

The max-width property defines the maximum width an element is allowed to have.

Syntax

.container {
    max-width: 1200px;
}

A common responsive pattern combines width: 100% with max-width.

Responsive Container

.container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

Behavior

Small Screen:
Available Width = 600px
Container Width = 600px

Large Screen:
Available Width = 1600px
Maximum Width   = 1200px
Container Width = 1200px

One of the Most Useful Responsive Patterns

width: 100% combined with max-width allows an element to shrink on smaller screens while preventing it from becoming too wide on larger screens.

min-width vs max-width

min-width

Defines the smallest allowed width.
Prevents excessive shrinking.
Can cause overflow on narrow screens.
Useful for minimum component sizes.

max-width

Defines the largest allowed width.
Prevents excessive expansion.
Common in responsive layouts.
Useful for containers and readable content.

Property	Question It Answers
min-width	How narrow can this element become?
max-width	How wide can this element become?

The min-height Property

The min-height property defines the minimum height an element must have while still allowing it to grow when more content is added.

Syntax

.card {
    min-height: 250px;
}

HTML

<div class="card">
    Dynamic content can grow.
</div>

CSS

.card {
    min-height: 250px;

    padding: 30px;
}

Useful for Dynamic Content

min-height is often safer than height because it provides a minimum size while still allowing the element to expand.

The max-height Property

The max-height property defines the maximum height an element is allowed to have.

Syntax

.panel {
    max-height: 300px;
}

When content becomes taller than max-height, the overflow property is often used to control the extra content.

Scrollable Panel

.panel {
    max-height: 300px;

    overflow-y: auto;
}

min-height vs Fixed Height

A fixed height forces an element to remain at one height, while min-height allows it to grow when content requires more space.

height: 200px

Element remains exactly 200px tall.
Long content may overflow.
Less flexible for dynamic content.
Useful when exact height is required.

min-height: 200px

Element is at least 200px tall.
Can grow with additional content.
Better for dynamic text.
Common in responsive components.

Prefer min-height for Content Cards

When content length can change, min-height usually provides safer and more flexible behavior than a fixed height.

Viewport Width (vw)

The vw unit represents a percentage of the browser viewport width.

Viewport Width Rule

1vw = 1% of Viewport Width

50vw = 50% of Viewport Width

100vw = 100% of Viewport Width

Example

.box {
    width: 50vw;
}

Calculation

Viewport Width = 1200px

50vw = 50% of 1200px

     = 600px

Viewport Height (vh)

The vh unit represents a percentage of the browser viewport height.

Viewport Height Rule

1vh = 1% of Viewport Height

50vh = 50% of Viewport Height

100vh = 100% of Viewport Height

Full-Screen Section

.hero {
    min-height: 100vh;
}

Calculation

Viewport Height = 900px

100vh = 100% of 900px

      = 900px

Common for Hero Sections

Viewport height units are frequently used to create sections that fill the visible browser window.

Modern Viewport Units

Modern CSS provides additional viewport units that help handle changing browser interface areas, especially on mobile devices.

Unit	Meaning
vh	Traditional viewport height
svh	Small viewport height
lvh	Large viewport height
dvh	Dynamic viewport height
vw	Traditional viewport width
svw	Small viewport width
lvw	Large viewport width
dvw	Dynamic viewport width

Modern Full-Screen Section

.hero {
    min-height: 100vh;
    min-height: 100dvh;
}

Dynamic Viewport Height

100dvh can be useful for mobile full-screen layouts because it responds to changes in the visible viewport as browser interface controls appear or disappear.

Width with calc()

The calc() function allows CSS to perform mathematical calculations using different units.

Syntax

.content {
    width: calc(100% - 250px);
}

This is useful when one part of the layout has a known size and another part should use the remaining space.

Calculation

Available Width = 1200px
Sidebar Width   = 250px

Content Width
= 100% - 250px
= 1200px - 250px
= 950px

Another Example

.box {
    width: calc(100% - 40px);
}

Spaces Around Operators

When using addition or subtraction inside calc(), include spaces around the + and - operators.

Width with min()

The min() function chooses the smallest value from the provided options.

Example

.container {
    width: min(90%, 1200px);
}

Behavior

Small Screen:
90% = 540px
1200px = 1200px

Chosen Width = 540px


Large Screen:
90% = 1440px
1200px = 1200px

Chosen Width = 1200px

Compact Responsive Container

width: min(90%, 1200px) can create a responsive centered container without separate width and max-width declarations.

Width with max()

The max() function chooses the largest value from the provided options.

Example

.box {
    width: max(300px, 50%);
}

Behavior

If 50% = 250px:
Compare 300px and 250px
Chosen Width = 300px

If 50% = 600px:
Compare 300px and 600px
Chosen Width = 600px

Watch Small Screens

A large minimum value selected by max() can cause overflow when the available space becomes smaller.

Width with clamp()

The clamp() function defines a minimum value, a preferred flexible value, and a maximum value.

Syntax

property: clamp(minimum, preferred, maximum);

Example

.container {
    width: clamp(300px, 80%, 1200px);
}

Behavior

Minimum Width  = 300px
Preferred Width = 80%
Maximum Width  = 1200px

The browser tries to use 80%.

But:

Never Smaller Than 300px
Never Larger Than 1200px

Position	Value	Purpose
First	300px	Minimum
Second	80%	Preferred flexible value
Third	1200px	Maximum

Content-Based Sizing

CSS can size elements based on their content instead of forcing a fixed dimension.

Value	Purpose
auto	Browser determines the size
min-content	Uses the smallest intrinsic content size
max-content	Uses the largest intrinsic content size
fit-content	Fits content while respecting available space

Examples

.one {
    width: min-content;
}

.two {
    width: max-content;
}

.three {
    width: fit-content;
}

Intrinsic Sizing

Content-based sizing allows the browser to use the natural size requirements of the content when calculating dimensions.

fit-content

The fit-content value allows an element to become only as wide as its content while still respecting the available space.

HTML

<div class="badge">
    New Course
</div>

CSS

.badge {
    width: fit-content;

    padding: 8px 16px;

    background: #6c5ce7;
    color: white;
}

Useful for Content-Sized Elements

fit-content is useful for badges, labels, tags, small panels, and other elements that should match their content width.

Width and Box Model

The final size of an element depends on both its width and height values and its box-sizing model.

content-box

.box {
    width: 300px;

    padding: 20px;

    border: 5px solid black;

    box-sizing: content-box;
}

content-box Calculation

Content Width = 300px
Padding       = 40px
Borders       = 10px

Final Width
= 300 + 40 + 10
= 350px

border-box

.box {
    width: 300px;

    padding: 20px;

    border: 5px solid black;

    box-sizing: border-box;
}

border-box Calculation

Declared Width = 300px

Content + Padding + Border
all fit inside 300px.

Final Width = 300px

Remember the Previous Lesson

Width and height cannot be fully understood without the box model because padding, borders, and box-sizing affect the final dimensions.

Width and Overflow

Overflow occurs when content or an element becomes larger than the available width or height.

Potential Overflow

.parent {
    width: 300px;
}

.child {
    width: 500px;
}

Calculation

Parent Width = 300px
Child Width  = 500px

Overflow
= 500px - 300px
= 200px

Responsive Solution

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

Rigid Width

width: 500px
Cannot shrink below 500px.
May overflow small parents.
Less responsive.

Flexible Width

width: 100%
max-width: 500px
Can shrink with the parent.
Stops growing at 500px.

Responsive Container

One of the most common uses of width and max-width is creating a centered responsive page container.

HTML

<div class="container">
    <h1>My Website</h1>

    <p>
        This content remains readable
        on both small and large screens.
    </p>
</div>

CSS

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

    margin: 0 auto;
}

Responsive Behavior

Mobile Screen
┌─────────────────────────┐
│  ┌───────────────────┐  │
│  │     Container     │  │
│  └───────────────────┘  │
└─────────────────────────┘

Large Screen
┌───────────────────────────────────────────┐
│       ┌───────────────────────────┐       │
│       │         Container         │       │
│       └───────────────────────────┘       │
└───────────────────────────────────────────┘

Small Screen → Uses 90%
Large Screen → Stops at 1200px

Responsive Card Example

The following example creates a card that adapts to the available width while maintaining a useful minimum height.

HTML

<article class="course-card">
    <span class="badge">
        CSS
    </span>

    <h2>
        Master Responsive CSS
    </h2>

    <p>
        Learn modern sizing techniques
        for flexible website layouts.
    </p>

    <a href="#">
        Start Learning
    </a>
</article>

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}

.course-card {
    width: 100%;
    max-width: 420px;

    min-height: 320px;

    padding: 32px;

    border: 1px solid #dfe6e9;
    border-radius: 16px;

    margin: 30px auto;

    background: white;
}

.badge {
    display: inline-block;

    width: fit-content;

    padding: 6px 12px;

    background: rgba(108, 92, 231, 0.12);
    color: #6c5ce7;

    border-radius: 20px;
}

.course-card a {
    display: inline-block;

    min-width: 150px;

    padding: 12px 24px;

    background: #6c5ce7;
    color: white;

    border-radius: 8px;

    text-align: center;
    text-decoration: none;
}

Full-Screen Section

Viewport units can create sections that fill the visible browser area.

HTML

<section class="hero">
    <h1>
        Learn CSS
    </h1>

    <p>
        Build modern responsive websites.
    </p>
</section>

CSS

.hero {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 40px;
}

Browser Calculation Flow

The browser evaluates several rules before deciding the final width and height of an element.

Read Width and Height

↓

Resolve Relative Units

↓

Check Available Space

↓

Apply min-width and min-height

↓

Apply max-width and max-height

↓

Apply Box Model

↓

Check Content Size

↓

Handle Overflow

↓

Render Final Dimensions

Dimension Calculation Process

HTML Element
      │
      ▼
Read CSS Dimensions
      │
      ▼
Resolve Units
(px, %, vw, vh, etc.)
      │
      ▼
Calculate Available Space
      │
      ▼
Apply Preferred Width / Height
      │
      ▼
Check Minimum Limits
      │
      ▼
Check Maximum Limits
      │
      ▼
Apply Box Model
      │
      ▼
Check Content Overflow
      │
      ▼
Render Final Size

Real-World Applications

Page Containers

Use width and max-width to keep website content readable.

Cards

Control card width while allowing flexible content height.

Images

Prevent media from becoming wider than its container.

Forms

Create full-width fields with controlled maximum sizes.

Sidebars

Define fixed, minimum, or maximum sidebar widths.

Hero Sections

Use viewport height for full-screen page sections.

Modals

Limit dialog width and height according to the viewport.

Scrollable Panels

Combine max-height with overflow for controlled scrolling.

Advantages

Precise Control

Set exact dimensions when a design requires them.

Responsive Layouts

Use flexible dimensions that adapt to available space.

Better Readability

Limit content width so long text lines remain comfortable to read.

Flexible Components

Combine minimum, preferred, and maximum dimensions.

Overflow Prevention

Use maximum sizes to keep elements inside their containers.

Viewport Layouts

Create sections based on the visible browser size.

Dynamic Sizing

Use CSS functions to calculate dimensions automatically.

Consistent Interfaces

Dimension rules help similar components maintain consistent sizes.

Common Beginner Mistakes

Using Fixed Width Everywhere

Large fixed widths can overflow smaller screens and containers.

Using Fixed Height for Dynamic Text

Content may overflow when text becomes longer than expected.

Forgetting the Box Model

Padding and borders may change the final dimensions under content-box.

Assuming width Means Final Width

The final visible width depends on box-sizing, padding, and borders.

Assuming height Means Final Height

Padding and borders can increase final height under content-box.

Using width: 100vw for Normal Containers

100vw can include scrollbar width and may create unnecessary horizontal overflow.

Using height: 100% Without a Defined Parent Height

Percentage height often needs a definite containing block height.

Using Large min-width Values

A large minimum width can force horizontal scrolling on small screens.

Forgetting max-width

Flexible elements may become unnecessarily wide on large screens.

Forgetting max-height Overflow

Content may spill outside an element when max-height is reached.

Hiding Overflow Instead of Fixing Dimensions

overflow: hidden can hide the symptom without solving the sizing problem.

Using height Instead of min-height

Fixed height can prevent components from growing with their content.

Using min-height When Exact Height Is Required

min-height allows growth and does not guarantee an exact final height.

Confusing Percentage and Viewport Units

Percentages usually depend on a containing block, while viewport units depend on the browser viewport.

Forgetting Parent Dimensions

Relative child dimensions depend on the size and layout of their containing block.

Ignoring Content Size

Long words, images, and child elements can force unexpected overflow.

Using calc() Without Spaces

Addition and subtraction operators inside calc() require proper spacing.

Replacing Simple CSS with Complex Functions

Do not use calc(), min(), max(), or clamp() when a simple width or max-width rule is clearer.

Using 100vh Without Considering Mobile Browsers

Mobile browser interface controls can affect traditional viewport height behavior.

Setting Both min-width and max-width Incorrectly

Conflicting constraints can create unexpected sizing behavior.

Best Practices

Use width to control horizontal dimensions.
Use height to control vertical dimensions.
Understand whether a dimension should be fixed or flexible.
Avoid unnecessary fixed widths.
Avoid unnecessary fixed heights.
Prefer natural height for text-based content.
Use min-height when content may grow.
Use max-width to prevent excessive expansion.
Use width: 100% with max-width for responsive components.
Use box-sizing: border-box for predictable dimensions.
Remember that content-box adds padding and borders outside declared dimensions.
Remember that border-box keeps padding and borders inside declared dimensions.
Check parent dimensions before using percentage values.
Remember that percentage width depends on the containing block width.
Remember that percentage height often requires a definite parent height.
Use percentage widths for fluid layouts.
Use max-width for readable page containers.
Use min-width only when a real minimum size is required.
Avoid min-width values that are wider than mobile screens.
Use min-height for cards with dynamic content.
Use max-height with overflow for scrollable panels.
Do not hide overflowing content without understanding the cause.
Use overflow-y: auto for vertically scrollable content areas.
Use viewport units when dimensions should depend on the browser viewport.
Use vw for viewport-relative horizontal sizing.
Use vh for viewport-relative vertical sizing.
Consider dvh for mobile full-screen layouts.
Use svh when the small viewport size is important.
Use lvh when the large viewport size is important.
Test viewport-based layouts on mobile devices.
Use calc() when dimensions require mathematical relationships.
Keep spaces around + and - operators inside calc().
Use min() when the smallest of multiple values should win.
Use max() when the largest of multiple values should win.
Use clamp() for minimum, preferred, and maximum sizing.
Use fit-content for content-sized badges and labels.
Use intrinsic sizing only when it improves layout behavior.
Keep responsive sizing rules simple.
Prefer width: 100% and max-width over rigid fixed widths.
Use max-width: 100% for media that must not overflow.
Avoid width: 100vw for ordinary full-width block elements.
Use width: 100% when the element should match its container.
Remember that 100vw refers to the viewport, not the parent.
Remember that 100% usually refers to the containing block.
Use min-height instead of height for flexible sections.
Use exact height only when the design truly requires it.
Check how content behaves when text becomes longer.
Check how content behaves when text becomes shorter.
Test components with different font sizes.
Test components with translated content.
Test cards with different content lengths.
Test layouts on narrow screens.
Test layouts on wide screens.
Test layouts when browser zoom changes.
Inspect computed dimensions using developer tools.
Check the active width value.
Check the active height value.
Check min-width constraints.
Check max-width constraints.
Check min-height constraints.
Check max-height constraints.
Check the active box-sizing value.
Check padding and border contributions.
Check child elements for overflow.
Check long unbroken text for overflow.
Check images for fixed intrinsic dimensions.
Use responsive image sizing.
Use max-width: 100% for large images when appropriate.
Keep page content within readable maximum widths.
Center limited-width containers with auto margins.
Use a consistent container strategy across the website.
Use CSS variables for repeated container widths.
Use CSS variables for repeated component dimensions.
Avoid random width values across similar components.
Avoid random fixed heights across similar components.
Use consistent minimum touch target sizes for interactive elements.
Allow buttons to grow when labels become longer.
Use min-width for buttons only when consistency is needed.
Do not force all buttons to identical widths without a design reason.
Allow form controls to adapt to their containers.
Use width: 100% for full-width form fields.
Use max-width when forms should remain readable.
Use max-height for dropdowns with many options.
Use scrollable areas only when necessary.
Do not create nested scroll areas without a clear reason.
Keep mobile layouts flexible.
Keep desktop layouts from becoming excessively wide.
Use responsive constraints instead of device-specific fixed sizes.
Use CSS functions when they simplify responsive behavior.
Do not overcomplicate basic dimension rules.
Understand the available space before choosing a unit.
Choose px for exact fixed dimensions.
Choose % for container-relative dimensions.
Choose vw and vh for viewport-relative dimensions.
Choose rem when dimensions should relate to the root font size.
Choose em when dimensions should relate to the current font size.
Use min(), max(), and clamp() intentionally.
Use developer tools to verify final dimensions.
Fix the cause of overflow instead of hiding it.
Keep content flexible.
Keep containers constrained.
Keep dimensions predictable.
Keep layouts responsive.

Flexible Width, Natural Height

A strong default approach for many responsive components is to use flexible width with a maximum limit and allow height to grow naturally with content.

Frequently Asked Questions

What does the CSS width property do?

The width property controls the horizontal dimension of an element.

What does the CSS height property do?

The height property controls the vertical dimension of an element.

What is the default width value?

The initial width value is auto, allowing the browser and layout context to determine the used width.

What is the default height value?

The initial height value is auto, allowing the element to size according to its content and layout context.

Does width include padding?

It depends on box-sizing. With content-box, padding is added outside the declared width. With border-box, padding is included inside the declared width.

Does height include padding?

It depends on box-sizing. With content-box, padding is added to the declared height. With border-box, padding is included inside it.

What is min-width?

min-width defines the smallest width an element is allowed to have.

What is max-width?

max-width defines the largest width an element is allowed to have.

What is min-height?

min-height defines the minimum height while still allowing the element to grow when necessary.

What is max-height?

max-height defines the maximum height an element is allowed to have.

Which is better: height or min-height?

For dynamic content, min-height is often safer because the element can grow. Use height when an exact fixed dimension is required.

How does percentage width work?

Percentage width is generally calculated relative to the width of the containing block.

Why does percentage height sometimes not work?

Percentage height often requires the containing block to have a definite height.

What does 100vw mean?

100vw means 100 percent of the viewport width.

What does 100vh mean?

100vh means 100 percent of the viewport height.

What is 100dvh?

100dvh represents 100 percent of the dynamic viewport height and can respond to changing browser interface areas.

What is the difference between 100% and 100vw?

100% usually depends on the containing block width, while 100vw depends on the browser viewport width.

Why can 100vw cause horizontal scrolling?

In some layouts, 100vw can include the scrollbar area and become slightly wider than the visible content area.

What does calc() do?

calc() allows CSS to calculate a value using mathematical expressions and different units.

What does min() do?

min() chooses the smallest value from the provided options.

What does max() do?

max() chooses the largest value from the provided options.

What does clamp() do?

clamp() defines a minimum value, a preferred value, and a maximum value.

What is fit-content?

fit-content allows an element to size according to its content while respecting available space.

How do I make a responsive container?

A common approach is to use width: 100% or a percentage together with max-width and centered auto margins.

How do I prevent an image from overflowing?

A common approach is max-width: 100% with height: auto.

Why does fixed height cause problems?

If the content becomes taller than the fixed height, it can overflow, become clipped, or require scrolling.

When should I use max-height?

Use max-height when an element should stop growing after a certain height, often together with overflow.

Should I use fixed dimensions for responsive websites?

Fixed dimensions are useful in specific cases, but flexible widths, maximum limits, and natural heights are usually better for responsive layouts.

How can I debug incorrect dimensions?

Use browser developer tools to inspect computed width, height, min/max constraints, padding, borders, box-sizing, and overflow.

What comes after CSS Width and Height?

The next lesson covers CSS Typography, including font families, font sizes, font weights, line height, text alignment, text decoration, letter spacing, word spacing, text transformation, and responsive typography.

Key Takeaways

Width controls the horizontal size of an element.
Height controls the vertical size of an element.
Fixed dimensions use values such as pixels.
Percentage width depends on the containing block width.
Percentage height often requires a definite containing block height.
auto allows the browser to determine dimensions.
Natural height is often safer for dynamic content.
min-width defines the smallest allowed width.
max-width defines the largest allowed width.
min-height defines the smallest allowed height.
max-height defines the largest allowed height.
width: 100% with max-width is a common responsive pattern.
min-height is often better than fixed height for dynamic content.
Viewport units size elements relative to the browser viewport.
vw represents viewport width.
vh represents viewport height.
dvh represents dynamic viewport height.
calc() performs mathematical dimension calculations.
min() chooses the smallest value.
max() chooses the largest value.
clamp() defines minimum, preferred, and maximum values.
fit-content sizes an element according to its content.
The box model affects final width and height.
border-box makes dimensions easier to predict.
Responsive dimensions help prevent overflow and broken layouts.

Summary

CSS width and height properties control the horizontal and vertical dimensions of HTML elements.

Dimensions can be defined using fixed units, percentages, viewport units, automatic sizing, intrinsic sizing, and CSS mathematical functions.

Fixed widths and heights provide exact control but can create problems when the available space or content size changes.

Percentage widths allow elements to respond to their containing blocks, while percentage heights usually require a definite parent height.

The min-width and max-width properties define how narrow or wide an element is allowed to become.

The min-height and max-height properties define vertical size limits while allowing more flexible layouts.

For dynamic content, min-height is often safer than a fixed height because the element can grow when additional space is required.

Viewport units such as vw, vh, and dvh allow dimensions to respond directly to the browser viewport.

CSS functions such as calc(), min(), max(), and clamp() provide powerful ways to create flexible and responsive dimensions.

The fit-content value allows elements such as badges and labels to size themselves according to their content.

The final dimensions of an element also depend on the CSS Box Model and the active box-sizing value.

A common responsive pattern is to combine a flexible width with max-width while allowing height to grow naturally.

Understanding width and height is essential for creating responsive containers, cards, forms, images, sidebars, full-screen sections, modals, and modern website layouts.

In the next lesson, you will learn CSS Typography, including font families, font sizes, font weights, line height, text alignment, text decoration, letter spacing, word spacing, text transformation, and responsive typography.