CSS
Topperworld.in
Height and Width
• Height and Width in CSS are used to set the height and width of boxes. Its
value can be set using length, percentage, or auto.
❖ CSS height property
• This CSS property sets the height of an element. It is used to set the height
of content area of an element.
• It does not include padding borders or margins, whereas it sets the height
of the area inside the padding, border, and margin of the element. It can
accept the length and percentage values. But it does not allow negative
values.
• If we set the height to a numeric value (like in px, %, etc.), the content can
be overflow if it does not fit in the given height. We can manage the
overflowing content by defining the overflow property.
• If the height of the container is not explicitly defined, and the element is
not absolutely positioned (i.e., position: absolute;), the value
of height property is set to auto. The min-height and max-height
properties can also be used to control the size.
©Topperworld
CSS
❖ CSS Height Property Values
The values of this property are tabulated as follows.
Value Description
auto It is a default value. Using this value browser is responsible for
calculating the height of the element. Negative values are not allowed.
length It specifies the height of an element using the length units such as px,
cm, pt, etc. Negative values are not allowed.
% It defines the height of the container in %. Negative values are not
allowed.
initial It is used to set the property to its default value.
inherit It is used to inherit the property from its parent element.
❖ CSS Width
• The CSS width property is used to set the width of the content area of an
element.
• It does not include padding borders or margins. It sets width of the area
inside the padding, border, and margin of the element.
❖ CSS width values
Value Description
auto It is a default value. it is used to calculate the width.
length It is used to define the width in px, cm etc.
% It defines the width of the containing block in %.
©Topperworld
CSS
initial It is used to set the property to its default value.
inherit It is used to inherit the property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>width and height</title>
<style>
.TW {
height: 120px;
width: 50%;
border: 5px solid black;
padding-left: 50px;
padding-top: 50px;
font-size: 42px;
font-weight: bold;
color: green;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="TW"> Topper World </div>
</body>
</html>
©Topperworld
CSS
Output:
❖ Height and width of Image
It is used to set the height and width of an image. It’s value can be in px,
cm, percent, … etc.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Height and width of image</title>
<style>
.TW {
width: 300px;
height: 200px;
border: 3px solid black; }
</style>
</head> <body>
<h3>Set the width and height of an Image</h3>
<img class="TW"
src="https://topperworld.in/media/2022/12/Topperworld-footer-
1024x279.png">
</body>
</html>
©Topperworld
CSS
Output:
©Topperworld
