Width and Height in CSS

The width and height CSS properties set the width/height of an element. By default, these properties define the width/height of the content area/box.

Valid Values:

• <length>
• <percentage>
• auto: calculates and selects a width/height for the element
• max-content: the intrinsic preferred width
• min-content: the intrinsic minimum width
• available: containing block width minus horizontal margin, border and padding
• fit-content: the larger of: the intrinsic minimum width; the smaller of the intrinsic preferred width and the available width

Note: The width and height attributes only set the area inside the padding, border and margin of the element and does not include them.

50+ HTML, CSS & JavaScript Projects With Source Code

Example:

Here is an example of the width CSS property:

#element1 {
width: 200px;
}
#element2 {
width: 5em;
}
#element3 {
width: 75%;
}
#element4 {
width: auto;
}

Example:

Here is an example of the height CSS property:

#element1 {
height: 200px;
}
#element2 {
height: 5em;
}
#element3 {
height: 75%;
}
#element4 {
height: auto;
}

Minimum and Maximum Widths and Heights

The following properties define CSS minimum and maximum widths and heights.

• min-width: sets the minimum width of an element
• max-width: sets the maximum width of an element
• min-height: sets the minimum height of an element
• max-height: sets the maximum height of an element

Create Login and SignUp Page In HTML & CSS

Valid Values:

• <length>
• <percentage>

Here is an example of the min-width CSS property.

h1 {
min-width: 500px;
background: lightblue;
}

Here is an example of the max-width CSS property.

p {
max-width: 250px;
background: lightgreen;
}

Here is an example of the min-height CSS property.

h1 {
min-height: 500px;
background: lightblue;
}

Here is an example of the max-height CSS property.

h3 {
max-height: 70px;
background: lightgreen;
/* let's hide the overlapping content */
overflow: hidden;
}