To set the dimenions of an element, use width and height.
Alternatively, use max-height, min-width, line-height, and others.
An element with custom width and height settings.
<style>
.sizes {
border: 3px solid #302ea3;
width: 250px;
height: 55px;
padding: 10px;
}
</style>
<div class="sizes">Custom sized element</div>
The following properties let you control the element's box dimension:
These properties can be set to auto or length values, like px, cm, percentage, etc.
Below is an element with a percentage width.
Resize the browser and see that the element adjusts with it.
<style>
.dimension {
height: 100px;
width: 80%;
border: 3px solid #302ea3;
padding: 5px;
}
</style>
<div class="dimension">
Height: 100 pixels and width: 80%
</div>
The min-height property specifies the element's minimum height.
It accepts any valid CSS length value.
An element with min-height:none will have no minimum height.
An element with a minimum height.
<style>
.min-height {
min-height: 200px;
border: 3px solid #302ea3;
padding: 15px;
}
</style>
<div class="min-height"> Minimum height: 200px</div>
For details on min-height, see our CSS min-height Property Reference.
The max-height property specifies the element's maximum height.
It accepts any valid CSS length value.
An element with max-height:none has no maximum height.
An element with a maximum height. The actual height is less than 100px.
<style>
.max-height {
max-height: 100px;
border: 3px solid #302ea3;
padding: 15px;
}
</style>
<div class="max-height"> Maximum height: 100px</div>
For details on max-height, see our CSS max-height Property Reference.
The min-width property specifies the element's minimum width.
It accepts any valid CSS length value.
An element with min-width:none has no minimum width.
An element with a minimum width. The actual width is larger than 300px.
<style>
.min-width {
min-width: 300px;
border: 3px solid #302ea3;
padding: 15px;
}
</style>
<div class="min-width">Minimum width: 300px</div>
For details on min-width, see our CSS min-width Property Reference.
The max-width property specifies the element's maximum width.
It accepts any valid CSS length value.
An element with max-width:none has no maximum width.
An element with a maximum width.
<style>
.max-width {
max-width: 400px;
border: 3px solid #302ea3;
padding: 15px;
}
</style>
<div class="max-width">Maximum width: 400px</div>
For details on max-width, see our CSS max-width Property Reference.
The line-height property sets the spacing between the lines of text.
It accepts these values: auto and any positive or negative length value.
The extra line-height increases the size of the container.
<style>
.line-height {
border: 3px solid #302ea3;
padding: 25px;
line-height: 40px;
}
</style>
<div class="line-height">
Paul Gauguin was a French Post-Impressionist
artist. Unappreciated until after his death,
Gauguin is now recognized for his experimental
use of color and Synthetist style that were
distinct from Impressionism. Toward the end
of his life, he spent ten years in French
Polynesia. The paintings from this time
depict people or landscapes from that region.
</div>
All properties that specify an element's dimension.
| Property | Description |
|---|---|
| height | Sets the height of an element |
| width | Sets the width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| line-height | Sets the spacing height between lines of text |
