CSS height and width Values
The height and width properties may have the following values:
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!
Setting max-width
Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!
Note: If you for some reason use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property will be used (and the width property will be ignored).
Example
This <div> element has a height of 100 pixels and a max-width of 500 pixels:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
All CSS Dimension Properties
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|