Width and Height of Elements in CSS

CSS Web Development Front End Technology

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 −

Live Demo

<!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

Live Demo

<!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>