Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Width and Height of Elements in CSS
To specify the height and width of an element, use the CSS height and width properties, 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 following is the syntax of height and width properties in CSS −
Selector {
height: /*value*/
width: /*value*/
}
Here are the values of the height property −
auto − The height is calculated by the web browser
length − The height is defined in length units
% − The height is set in percentage
Here are the values of the width property −
auto − The height is calculated by the web browser
length − The height is defined in length units
% − The height is set in percentage
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 |
The following examples illustrate CSS height and CSS width properties −
Height and width of a div
The height and width of a div container is set here using the heigh and width properties −
#demo {
margin: auto;
width: 400px;
height: 80px;
border: 2px solid black;
display: flex;
border-radius: 15px;
}
Example
Let us see the example −
<!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>
<h1>Demo Heading</h1>
<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>
Height and width of a navigation menu
The menu height and width are set using the height and width properties −
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us </a>
<a class="links" href="#">More Info</a>
<input type="text" placeholder="Search Here.." />
</nav>
</body>
</html>
Height and width of an image
Let us see an example to set the height and width of an image using the height and width properties.
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<img src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
1K+ Views
