CSS Width and Height
Understanding DimensionsIn this lesson, we will learn how to set width and height of an HTML element using CSS width and height properties.
CSS width Property
The CSS width property is used to specify the width of an HTML element. It is used to set the horizontal dimension of an element.
The width can be set in various units like px, em, rem, % and vw (viewport width).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS width Example</title>
<!-- Internal CSS -->
<style>
p {
width: 400px;
background-color: #EAEAA0;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>
CSS min-width and max-width
The CSS min-width and max-width properties are used to set the minimum and maximum width of an HTML element.
Using min-width and max-width along with width property allows an element to adapt a width within the specified range.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS width, min-width and max-width Example</title>
<!-- Internal CSS -->
<style>
p {
min-width: 200px;
max-width: 500px;
width: 300px; /* width locked between 200px and 500px */
background-color: #EAEAA0;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>In the above example, we set the min-width and max-width of a paragraph to 200px and 500px respectively and explicitly set the width of the paragraph to 300px. This means that the width is locked between 200px and 500px and It can not be set below 200px and above 500px.
CSS height Property
The CSS height property is used to specify the height of an HTML element. It is used to set the vertical dimension of an element.
The height can be set in various units like px, em, rem, % and vh (viewport height).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS height Example</title>
<!-- Internal CSS -->
<style>
p {
width: 400px;
height: 300px;
background-color: #EAEAA0;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>CSS min-height and max-height
The CSS min-height and max-height properties are used to set the minimum and maximum height of an HTML element.
Using min-height and max-height along with height property allows an element to adapt a height within the specified range.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS height, min-height and max-height Example</title>
<!-- Internal CSS -->
<style>
p {
width: 400px;
min-height: 150px;
max-height: 300px;
height: 230px; /* height locked between 150px and 300px */
background-color: #EAEAA0;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>In the above example, we set the min-height and max-height of a paragraph to 150px and 300px respectively and explicitly set the height of the paragraph to 230px. This means that the height is locked between 150px and 300px and It can not be set below 150px and above 300px.
CSS vw and vh Units
In CSS, the vw and vh units stand for viewport width and viewport height respectively. The vw and vh units are used to scale an element either vertically or horizontally relative to the viewport size.
The viewport in CSS refers to the visible area of a web page within the browser window.
1vw = 1% of the viewport width. 50vw = 50% of the viewport width. 100vw = 100% of the viewport width. 1vh = 1% of the viewport height. 50vh = 50% of the viewport height. 100vh = 100% of the viewport height.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS height, min-height and max-height Example</title>
<!-- Internal CSS -->
<style>
div {
width: 50vw; /* 50% of viewport width */
height: 50vh; /* 50% of viewport height */
background-color: #B1EEB0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>