CSS Height and Width
CSS Height and Width
The CSS height and
width properties are used to set the height and width of an element.
Try it Yourself »
CSS Set height and width
The height and
width properties are used to set the
height and width of an element.
The height and width do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and
width properties
can have the following values:
auto- This is default. The browser calculates the height and widthlength- Defines the height or width in px, cm, em, etc.%- Defines the height or width in percent of the containing blockinitial- Sets the height or width to its default valueinherit- The height or width will be inherited from its parent value
CSS height and width Examples
Example
Set the height and width of a <div> element:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Example
Set the height and width of another <div> element:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Note: Remember that the
height and
width properties do not include padding, borders,
or margins! They set the height/width of the area inside the padding, border,
and margin of the element!
Try it Yourself - Examples
Set the height and width of elements
This example demonstrates how to set the height and width of different elements.
Set the height and width of an image using percent
This example demonstrates how to set the height and width of an image using a percent value.
