CSS Max-Width And Height Property

The CSS max - width and height properties are used to set width and height respectively. The CSS max-width and max-height are used to set the maximum width and maximum height respectively.

CSS Width And Height Property Value

CSS width and height have the following values.

auto -This is the default value. The browser calculates the height and width.
length - Defines the height/width in px, cm etc.
% - Defines the height/width in percent of the containing block.
initial - Sets the height/width to its default value.
inherit - The height/width will be inherited from its parent value.

Note: The CSS width and height is a box model property that is applied to the HTML element. The block-level element takes all available widths.

Source Code

          div{
  height: 200px;
  width: 50%;
  background-color: orange;
}

Try it now

Code Explanation

Note: In this example CSS width & height property is used to provide <div> element width and height.

Assigning max-width

CSS max-width provides the maximum width of an element. Max-width value can be in px, cm, or percentage.

Generally, block-level element takes the full available width. If any block-level element has definite widths such as 500px and margin auto then the container center itself with respect to horizontal and then divide the rest empty space into two equal part i.e. left and right margin. But in this case when the browser resizes then it shows a horizontal scroll bar.

Whenever a block-level element contains max-width such as 500px and margin auto then in this case this container is also centered itself with respect to horizontal. But when resizing the browser then no horizontal scrollbar appears.

Source Code

          div.ex2 {
  width: 500px;
  margin: auto;
  border: 3px solid #73ad21;
}

Try it now

Code Explanation

Note: In this illustration CSS width & max-width property is used.CSS max-width property does not create scroll bar during resizing of window smaller than max-width size while CSS width property creates horizontal scroll bar during resizing window size less than defined width.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4