CSS Width and Height | Height Width and css explanation – codewithrandom
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.
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
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;
}
Check it more