Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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
selector {
height: value;
width: value;
}
Possible Values
Here are the values of the height and width properties −
| Value | Description |
|---|---|
| auto | The dimension is calculated by the web browser |
| length | The dimension is defined in length units (px, em, rem, etc.) |
| % | The dimension is set as a percentage of the parent element |
Box Model Calculation
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 1: Basic Width and Height
The following example demonstrates setting width and height on a div container −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 150px;
background-color: #4CAF50;
border: 2px solid #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">300px x 150px Box</div>
</body>
</html>
A green box with dimensions 300px wide by 150px tall, containing centered white text "300px x 150px Box" appears on the page.
Example 2: Percentage-based Dimensions
This example shows how to use percentage values for responsive design −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
margin: 20px auto;
}
.child {
width: 50%;
height: 50%;
background-color: #FF6B6B;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
A light gray container taking 80% of the viewport width with a smaller red box inside taking 50% of the container's width and height.
Example 3: Image Dimensions
The following example sets specific width and height for an image −
<!DOCTYPE html>
<html>
<head>
<style>
.styled-image {
width: 200px;
height: 150px;
border: 3px solid #2196F3;
border-radius: 10px;
object-fit: cover;
}
</style>
</head>
<body>
<h3>Styled Image with Fixed Dimensions</h3>
<img class="styled-image" src="/css/images/logo.png" alt="Logo">
</body>
</html>
An image with fixed dimensions of 200px width by 150px height, surrounded by a blue border with rounded corners appears on the page.
Conclusion
The width and height properties are fundamental for controlling element dimensions in CSS. Use fixed values for precise control or percentages for responsive layouts. Remember that the total element size includes padding, borders, and margins.
3K+ Views
