CSS Width & Height

CSS CODES & EXAMPLES

CSS Width & Height

Learn how to control the size of HTML elements using CSS width, height, min-width, max-width, min-height, max-height, percentages and responsive viewport units.

← CSS Padding Start Learning →

What are Width & Height?

Control the dimensions of an element

The CSS width property controls the horizontal size of an element, while height controls its vertical size.

Common Properties: width height min-width max-width min-height max-height

Basic Width

Set a fixed width

width.css

.box {
  width: 300px;
}

width: 300px

Basic Height

Set a fixed height

height.css

.box {
  height: 200px;
}

height: 200px

Width + Height Together

Control both dimensions

dimensions.css

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

300px × 180px

Width in Percentage

Create flexible layouts

percentage-width.css

.box {
  width: 80%;
}

width: 80%

Percentage width is calculated relative to the containing block. It is useful for flexible and responsive layouts.

Width: 100%

Make an element fill its parent

width-100.css

.box {
  width: 100%;
}

width: 100%

max-width

Prevent an element from becoming too wide

max-width.css

.container {
  width: 100%;
  max-width: 1100px;
  margin: auto;
}

max-width: 1100px

max-width is one of the most important properties for responsive website containers.

min-width

Prevent an element from becoming too narrow

max-height

Limit the vertical size

max-height.css

.box {
  max-height: 250px;
  overflow: auto;
}

max-height: 250px

This container demonstrates how max-height can limit the vertical size of an element. Additional content can be handled using overflow.

CSS allows developers to create controlled and predictable layouts for different screen sizes.

More content can be added here when necessary.

min-height

Guarantee a minimum vertical size

min-height.css

.card {
  min-height: 220px;
}

min-height: 220px

Viewport Width — vw

Size relative to the browser viewport

viewport-width.css

.box {
  width: 50vw;
}

50vw

1vw represents 1% of the viewport width.

Viewport Height — vh

Size relative to the browser viewport height

viewport-height.css

.hero {
  min-height: 70vh;
}

70vh

auto

Let the browser calculate the size

auto.css

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

width: auto
height: auto

box-sizing: border-box

Better control over declared dimensions

box-sizing.css

* {
  box-sizing: border-box;
}

.box {
  width: 300px;
  padding: 30px;
  border: 5px solid #1769d5;
}

300px declared width Padding and border included

border-box Predictable layout sizing

Responsive Container

Common professional website pattern

responsive-container.css

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

WIDTH: 100% MAX-WIDTH: 1200px Responsive Container

Responsive Width

Change dimensions on smaller screens

responsive-width.css

.card {
  width: 48%;
}

@media (max-width: 700px) {
  .card {
    width: 100%;
  }
}

48%

Responsive Images

Prevent images from overflowing containers

responsive-image.css

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

Responsive Image

Practical Course Cards

Use width and height in a real layout

Computer Fundamentals

Learn computer basics, hardware, software, memory and operating systems.

View Course →

Web Designing

Learn HTML, CSS and responsive website development through practical examples.

View Course →

Tally Prime

Learn accounting, GST, inventory and practical business applications.

View Course →

Quick Reference

Important width and height properties

Property	Example	Purpose
width	`width: 300px;`	Set element width
height	`height: 200px;`	Set element height
max-width	`max-width: 1200px;`	Set maximum width
min-width	`min-width: 250px;`	Set minimum width
max-height	`max-height: 400px;`	Set maximum height
min-height	`min-height: 200px;`	Set minimum height
vw	`width: 50vw;`	Viewport width unit
vh	`height: 70vh;`	Viewport height unit
box-sizing	`border-box`	Control box dimensions