html
/

CSS Width & Height

Last Sync: Today

On this page

12
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Width & Height

What are Width & Height?

Width and height properties define the size of an element's content area.

Basic Example

CSSRead-only
1
div {
  width: 200px;
  height: 100px;
}

Using Percentage

CSSRead-only
1
div {
  width: 50%;
  height: 50%;
}

Min and Max Properties

CSSRead-only
1
div {
  min-width: 150px;
  max-width: 500px;
  min-height: 100px;
  max-height: 300px;
}

Auto Value

CSSRead-only
1
div {
  width: auto;
  height: auto;
}

Responsive Units

CSSRead-only
1
div {
  width: 50vw;
  height: 30vh;
}

Width vs Max-Width

PropertyBehavior
widthFixed or relative size
max-widthLimits maximum size (responsive)

Example: Responsive Image

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

Box Model Impact

Width and height apply to content only by default. Padding and border add to the total size unless box-sizing is used.

CSSRead-only
1
div {
  box-sizing: border-box;
}

Best Practices

  • Use max-width for responsive layouts
  • Avoid fixed heights when possible
  • Use relative units like %, vw, vh
  • Combine with box-sizing for better control

Common Mistakes

  • Using fixed sizes for responsive design
  • Forgetting padding affects size
  • Using height unnecessarily
  • Not using max-width for images

Conclusion

Width and height are essential for layout control. Using responsive units and max/min properties improves flexibility across devices.

Try it yourself

div {
  width: 50%;
  height: 100px;
  background: lightblue;
}

Test Your Knowledge

Q1
of 3

Which is responsive?

A
px
B
%
C
pt
D
cm
Q2
of 3

Which limits size?

A
width
B
max-width
C
height
D
min-height
Q3
of 3

Which unit is viewport?

A
px
B
%
C
vw
D
em

Frequently Asked Questions

What does width control?

The horizontal size of an element.

Why use max-width?

To make layouts responsive.

Does padding affect width?

Yes, unless box-sizing is used.

Previous

css padding

Next

css box model

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.