CSS Height, Width, Min-width, and Max-height
The CSS height and width properties are used to set the height and width of an
element.
The CSS min-width and max-height properties help to control the minimum width and
maximum height of an element.
This element has a height of 200px and a width of 80%.
CSS Setting Height and Width
The height and width properties are used to specify the size of an element.
These properties define the size of an element's content box, excluding padding,
borders, and margins.
CSS Height and Width Values
The height and width properties can accept the following values:
auto: This is the default value. The browser automatically calculates the size
based on content.
length: Specifies the height or width using values like px, em, rem, cm, etc.
%: Specifies the size as a percentage of the parent element's dimensions.
initial: Sets the property to its default value.
inherit: The value is inherited from the parent element.
Example 1: Setting Height and Width of an Element
Here’s how you can set a div with a fixed height and a percentage-based width:
css
Copy code
div {
height: 300px;
width: 80%;
background-color: lightgreen;
}
Example 2: Fixed Width and Height
For a div with a fixed height and width:
css
Copy code
div {
height: 200px;
width: 400px;
background-color: lightyellow;
}
Note: The height and width properties exclude padding, border, and margin. They
only define the size of the content area.
Setting Min-Width and Max-Height
The min-width property sets the minimum width of an element, while max-height
defines the maximum height.
For example, if you want to ensure that a div does not shrink smaller than a
certain width or grow taller than a certain height:
css
Copy code
div {
min-width: 250px;
max-height: 600px;
background-color: lightcoral;
}
Max-width Example
The max-width property limits the width of an element, even if the width property
is set to a larger value.
Example 1: Using max-width instead of width for better handling on smaller screen
sizes:
css
Copy code
div {
max-width: 300px;
height: 150px;
background-color: lightblue;
}
Note: If you use both width and max-width properties on the same element, the max-
width will be respected if the width exceeds it. The element's actual width will
never be larger than the value specified in max-width.
Min-Height and Max-Width Example
The min-height and max-width properties can be used to set both minimum and maximum
values for an element's height and width.
For example:
css
Copy code
div {
min-height: 100px;
max-width: 500px;
background-color: lightgoldenrodyellow;
}
Example - Min-width and Max-height
You can also use min-width and max-height together to control the dimensions of an
element. Here's how:
css
Copy code
div {
min-width: 200px;
max-height: 400px;
background-color: lightgrey;
}
This ensures that the element has a minimum width of 200px and a maximum height of
400px.
