CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Height and Width

The width property is used to set the width of an element.

This element has a width of 100%
This element has a width of 75%
This element has a width of 50%
Width 25%
Run code

The height property is used to set the height of an element.

Height 100%
Height 75%
Height 50%
Height 25%
Height Auto
Run code

Setting height and width

The height and width properties can have the following values:

  • auto - the browser will calculate and select a height/width for the specified element (This is default)
  • length - specifies height/width in px, pt, cm, etc. See length units
  • inherit - specifies that the height/width should be inherited from the parent element

This element has a height of 100 pixels and a width of 400 pixels

This element has a height of 200 pixels and a width of 75%

Run code

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the content area - see CSS box model.



Setting max-width

The max-width property is used to set the maximum width of an element.

If the content is larger than the maximum width, it will change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

This prevents the value of the width property from becoming larger than max-width.

Run code

Setting min-width

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

This prevents the value of the width property from becoming smaller than min-width.

Run code

Setting max-height

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

If the content is larger than the maximum height, it will overflow.

If the content is smaller than the maximum height, the max-height property has no effect.

This prevents the value of the height property from becoming larger than max-height.

Run code

Setting min-height

The min-height property sets the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

This prevents the value of the height property from becoming smaller than min-height.

Run code

CSS Height and Width properties

Property Description
width Sets the width of an element
height Sets the height of an element
max-width Sets the maximum width of an element
min-width Sets the minimum width of an element
max-height Sets the maximum height of an element
min-height Sets the minimum height of an element