CSS Max width And Height

The CSS max width and height properties are used to set max 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.

Example

General Syntax

     div {
 height: 200px;
 width: 50%;
}

Source Code

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

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 maximium width of an element.Max-width value can be in px,cm,or percentage.

Generally, block-level element takes full available width. If any block-level element having definite width 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 center itself with respect to horizontal. But when resize the browser then no horizontal scrollbar appears.

General Syntax

     div.ex1 {
 max-width: 500px;
}

Source Code

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

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

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.

Example

General Syntax

     div.example1 {
 max-width: 500px;
 margin: auto;
}

Source Code

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

Code Explanation

Note: In this example, CSS max-width property is used which does not create a horizontal scrollbar during resizing the window smaller than max-width size.

Online Test / Quiz

Question set 1

Our Tutorials

How To Use CSS Max width & CSS Max Height

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS