The CSS height and width property are used to specify the height and width of an element respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties.
Syntax
The syntax of CSS height and CSS width property is as follows −
Selector {
height: /*value*/
width: /*value*/
}The actual width and height of elements is calculated as follows −
| Box Size | Calculation |
|---|---|
| Total Width | width + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
| Total Height | height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
Example
The following examples illustrate CSS height and CSS width properties −
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 400px;
height: 80px;
border: 2px solid black;
display: flex;
border-radius: 15px;
}
#demo div {
flex: 1;
border: thin dotted;
border-radius: 50%;
line-height: 60px;
text-align: center;
}
#orange {
box-shadow: inset 0 0 8px orange;
}
#green {
box-shadow: inset 0 0 8px green;
}
#blue {
box-shadow: inset 0 0 8px blue;
}
#red {
box-shadow: inset 0 0 8px red;
}
</style>
</head>
<body>
<div id="demo">
<div id="orange">Somebody</div>
<div id="green">that I</div>
<div id="blue">used</div>
<div id="red">to know</div>
</div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 10% 35%;
box-shadow: 0 0 6px 1px black;
max-width: 200px;
max-height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<h2>Java 8 Features</h2>
<article>
Lambda expression adds functional processing capability to Java.
Referencing functions by their names instead of invoking them directly.
Interface to have default method implementation.
New compiler tools and utilities are added like ‘jdeps’ to figure out dependencies.
New stream API to facilitate pipeline processing.
Improved date time API.
Emphasis on best practices to handle null values properly.
Nashorn, a Java-based engine to execute JavaScript code.
</article>
</body>
</html>Output
This gives the following output −
