CSS height property
➔ The height property is used to set the height of an element.
➔ The height property does not include padding, border, or margin, which means it determines the height of the element inside the padding, border, and margin.
➔ The height attribute can have one of the following values.
autoThis is the default value and the browser automatically calculates the height of the element.lengthCalculates the height in px, cm etc.%Calculates the height as a percentage of the parent element.initialResets the height to its default value.inheritThe height will inherit from its parent element height.
Syntax
height: auto|length|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| auto | The browser sets the height. This is default. |
| length | Specifies the height in px, cm, etc. |
| percentage | Defines the height as a percentage of the height of the containing (parent) block element. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
Height in %
In percentage measurements, the child calculates from the parent unit.
Example
.p1 {
height: 600px;
border: 1px solid black;
background-color: #959595;
}
.p2 {
height: 50%;
border: 1px solid black;
background-color: #96bcec;
}Click on the "Try it Now" button to see how it works.
Vertically Center
Example
.p1 {
position:relative;
height: 300px;
border: 1px solid black;
background-color: #959595;
}
.p2 {
height: 20%;
border: 1px solid black;
background-color: #96bcec;
margin:0;
position:absolute;
top: 50%;
transform: translateY(-50%);
}Click on the "Try it Now" button to see how it works.
Vertically Center using flexbox
Example
.p1 {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid black;
background-color: #959595;
}
.p2 {
height: 50%;
border: 1px solid black;
background-color: #96bcec;
margin: 0;
}Click on the "Try it Now" button to see how it works.
Horizontally and Vertically Center
Example
.p1 {
position:relative;
height: 300px;
border: 1px solid black;
background-color: #959595;
}
.p2 {
height: 20%;
width:50%;
border: 1px solid black;
background-color: #96bcec;
margin:0;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Click on the "Try it Now" button to see how it works.