CSS Width and Height Properties

The width and height properties had introduced in CSS 1 as part of the CSS box model. The height and width properties in CSS allow us to set the height and width for an element’s box. In other words, these properties are used to control the size of content width or area.

Basically, CSS displays an element’s box in terms of two types of widths: content width and box width. The content width represents the width of the content area of an element’s box.

The content area is that area where the content of the box exists. It is calculated by the width property provided by CSS. The width property does not include any padding, border, or margin. When you set the width property for an element’s box, you are actually setting the width of the content area by default in the box.

On the other hand, the box width represents the total width of the entire element’s box, which includes the content width, left and right padding, the left and right border, as well as the left and right margin. The box width is the actual space an HTML element takes up in the layout of the webpage.

The total width of the box can be calculated as follows:

Box Width = Content Width + Padding (left + right) + Border (left + right) + Margin (left + right)

Similarly, the total height of box can be calculated as follows:

Box Height = Content Height + Padding (top + bottom) + Border (top + bottom) + Margin (top + bottom)

Look at the below figure in which we have displayed the CSS box model diagram with content area and element box area.

CSS box model: content width and box width

As you can understand from the figure, the width is the space measured from left inside padding edge to right inside padding edge. Similarly, the content height and box height both are determined in this manner.


Both width and height properties are non-inherited properties in CSS, meaning that these properties are not automatically inherited from a parent element to its child elements. Each element must have its own width and height explicitly defined if you want to control the dimensions of content area.

Possible Values for CSS Width and Height Properties


We can use the width and height properties to set the dimensions of an element’s box. The width and height properties in CSS can take any of the following values:

  • pixel
  • percentage
  • em
  • rem
  • auto (keyword value)

Width and Height Properties with Pixel Values


In CSS, we can set the width and height properties using pixel value. A pixel (px) is an absolute unit of measurement in CSS, which represents a fixed size dimension. It does not change regardless of the viewport or parent element size. For example, width: 100px means the element will always be 100 pixels wide.

Example 1:

div {
   width: 200px;
   height: 100px;
   background-color: lightblue;
}

Width and Height Properties with Percentage Values


Similarly, if we use percentage values for the width and height properties in CSS, the size of the box is relative to the dimensions of its containing element (usually its parent element), not directly to the browser window. The containing element is usually the parent element in which the element’s box resides. Let’s take an example on it.


Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>Percentage Values Example</title>
<style>
.container {
    width: 400px;
    height: 200px;
    background-color: lightgrey;
    padding: 20px;
}
.box {
    width: 50%; /* 50% of the parent's width */
    height: 50%; /* 50% of the parent's height */
    background-color: lightblue;
    padding: 20px;
}
</style>
</head>
<body>
   <div class="container">
       This is a parent container having the width and height of 400px and 200px, respectively.
       <div class="box">This is a box inside the parent container having the width and height of 50% and 50% of the parent's width and height, respectively.</div>
   </div>
</body>
</html>

Output:

Width and height properties with pixels and percentage values.
In this example, the container’s width is fixed at 400 pixels, while the container’s height is fixed at 200 pixels. The width of the box is set at 50% of the container’s width (50% of 400px = 200px). The height of the box is set at 50% of the container’s height (50% of 200px = 100px).

Width and Height Properties with EM Values


In CSS, the em is a relative unit that depends on the font-size of the element it is applied to. When you set em unit for width and height properties in CSS box, the size will depend on the size of text within it. However, if you do not explicitly set the font-size, it will inherit font-size from its parent element.

Let’s take an example in which we will explicitly set the font-size of the element’s box. And the width and height properties will depend on the size of text within it.

Example 3: 

<!DOCTYPE html>
<html>
<head>
     <title>Example of Width and Height Properties with em value.</title>
<style>
div {
  /* Explicitly setting font-size for the div element. */
     font-size: 30px;
     width: 10em; /* 10 times the font-size of the text within div element. */
     height: 5em; /* 5 times the font-size of the text within div element. */
     background-color: lightcoral;
}
</style>
</head>
<body>
    <div>This is a div element of width 10em and height 5em.</div>
</body>
</html>

In this example, we have explicitly set the font-size of 30px for a div element. The width of a div element is 10em, which is equal to 10 * 30px = 300px. Similarly, the height of the div element is 5em, which is equal to 5 * 30px = 150px.


Let’s take an example in which we will inherit the font-size of the parent element for the width and height properties.

Example 4:

<!DOCTYPE html>
<html>
<head>
    <title>Example of Inheriting Font-size to Determine Width and Height</title>
<style>
.parent {
    font-size: 15px; /* Parent element with a font-size of 20px */
    background-color: lightgrey;
    padding: 10px;
}
.child {
    width: 20em; /* 20 times the font-size of the parent element. */
    height: 10em; /* 10 times the font-size of the parent element. */
    background-color: lightcoral;
}
</style>
</head>
<body>
   <div class="parent">
        <div class="child">This div element will use the font-size of its parent div element to determine its width and height if the font-size is not explicitly set for this div element.</div>
   </div>
</body>
</html>

Output:

An example of inheriting font-size of its parent element to determine the width and height.

In this example, we have not set the font-size for the child div element. So, it will take the font-size of its parent div element to determine its width and height. The .parent element has set at a font-size of 16px. The width of .child div element is 20em, which equals 20 * 15px = 300px. Similarly, the height of .child div element is 10em, which equals 10 * 15px = 150px.

Width and Height Properties with REM Values


In CSS, the rem is a relative unit that depends on the font-size of the root element (usually the <html> element). This makes rem units more predictable and easier to manage across different elements.

Example 5:

<!DOCTYPE html>
<html>
<head>
    <title>Example of Width and Height Properties with REM Values</title>
<style>
html {
   font-size: 16px; /* Setting the font-size for the root element. */
}
div {
   width: 20rem; /* 20 times the font-size of the root element */
   height: 10rem; /* 10 times the font-size of the root element */
   background-color: lightblue;
}
</style>
</head>
<body>
    <div>This div element has a width of 20 times the font-size of the root element and a height of 10 times the font-size of the root element.</div>
</body>
</html>

auto Values for Width and Height


The auto value allows the element to adjust its height or width automatically based on its content. By default, width and height properties set on an auto value, meaning that if you do not specify a width or height, the value is the auto keyword. The auto value lets the browser calculate the dimension based on the element’s content. For example:

div {
   height: auto; /* Automatically calculated width */
   width: auto;
   background-color: lightblue;
   padding: 20px;
}

Example 6:

<!DOCTYPE html>
<html>
<head>
    <title>Auto Value for Width and Height Example</title>
<style>
div {
   width: auto;
   height: auto;
   background-color:lightblue;
   padding: 10px;
}
</style>
</head>
<body>
    <div>This div element has an auto value for its width and height properties.</div>
</body>
</html>

Output:

An example of setting auto value.

In this example, we have set the width and height with auto value. Therefore, the div element will adjust its height and width based on the content inside it.

Let’s take an example in which we will set all possible values for the width and height properties in CSS. This example demonstrates the use of pixels, percentages, em, rem, auto, and calc values.

Example 7:


<!DOCTYPE html>
<html>
<head>
    <title>All Possible Values for CSS Width and Height Properties</title>
<style>
.container {
    width: 80%; /* The container takes 80% of the width of its parent element. */
    margin: 0 auto; /* Centers the container horizontally. */
    background-color: #f0f0f0; /* Sets a light gray background color. */
    padding: 20px; /* Adds padding inside the container. */
}
.box-px {
    width: 200px; /* Sets the width to 200 pixels. */
    height: 100px; /*  Sets the height to 100 pixels. */
    background-color: lightblue;
    margin-bottom: 10px;
}
.box-percent {
    width: 50%; /* Sets the width to 50% of its parent container's width. */
    height: 50%; /* Sets the height to 50% of its parent container's height. */
    background-color: lightgreen;
    margin-bottom: 10px;
}
.box-em {
    font-size: 16px; /* Sets the font size for calculations. */
    width: 20em; /* Sets the width to 20 times the font-size (20 * 16px = 320px). */
    height: 10em; /* Sets the height to 10 times the font-size (10 * 16px = 160px). */
    background-color: lightcoral;
    margin-bottom: 10px;
}
.box-rem {
 /* Sets the width to 20 times the root font-size (assuming root font-size is 16px, 20 * 16px = 320px). */
    width: 20rem; 
 /* Sets the height to 10 times the root font-size (10 * 16px = 160px). */
    height: 10rem;
    background-color: lightyellow;
    margin-bottom: 20px;
}

.box-auto {
    width: auto;
    height: auto;
    background-color: lightpink;
    margin-bottom: 20px;
}

.box-calc {
 /* The width is 100% of the parent container's width minus 50 pixels. */
    width: calc(100% - 50px);
 /* The height is 100% of the viewport height minus 100 pixels. */ 
    height: calc(100vh - 100px);
    background-color: lightgray;
    margin-bottom: 20px;
}
</style>
</head>
<body>
   <div class="container">
       <div class="box-px">Width: 200px, Height: 100px</div>
       <div class="box-percent">Width: 50%, Height: 50%</div>
       <div class="box-em">Width: 20em, Height: 10em</div>
       <div class="box-rem">Width: 20rem, Height: 10rem</div>
       <div class="box-auto">Width: auto, Height: auto</div>
       <div class="box-calc">Width: calc(100% - 50px), Height: calc(100vh - 100px)</div>
   </div>
</body>
</html>

In this tutorial, we have explained how to use the height and width properties in CSS with different possible values. These properties determine the size or dimension of element’s box on a web page. Thanks for reading this tutorial.