CSS Height and Width

❮ Previous Next ❯

The CSS properties for height and width help you adjust how tall and wide something on a webpage should be.

The CSS max-width property enables you to specify the maximum size that an element can attain.

This thing is 50 pixels tall and takes up the 100% width.

CSS Setting height and width

You can use the height and width properties to change how tall and wide an element is on a webpage.

The height and width properties tell us how big something is, but they don't count the extra space around it like padding, borders, or margins. Instead, they only measure the space inside the padding, border, and margin of the element.

CSS height and width Values

The height and width of something can have following values.

auto - This is the standard setting. The web browser figures out the size using the height and width values provided.
length -Specifies the size in pixels, centimeters, or other units.
% - Describes how much something stretches in relation to the block it's in, using percentages for both height and width.
initial - Resets the height and width to their original values.
inherit -The height and width of something will be the same as its parent's size.

CSS height and width Examples

Height is 200 pixels and has a width of 50%

This element has a height of 100 pixels and a width of 500 pixels.

Note: Keep in mind that when you use theheight and width properties, they don't count the padding, borders, or margins. Instead, they determine the size of the space inside those elements.

Setting max-width

The max-width property helps limit how maximum an element can become.

You can set the max-width in different ways: using numbers with units like pixels (px) or centimeters (cm), as a percentage (%) of the containing block, or leaving it unset (which means there's no maximum width).

The issue with the <div> mentioned happens when the browser window is not wide enough for the element (which is 500px wide). In this situation, the browser adds a horizontal scrollbar to the page.

In this case, using max-widthinstead will make sure that the web browser works better when the window is small.

Tip: Make your internet browser window narrower than 500 pixels. You'll notice a change in the appearance of two sections on the screen.

This element has a height of 100 pixels and a max-width of 500 pixels.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 200px;
        width: 50%;
        background-color: powderblue;
      }
    </style>
  </head>
  <body>
    <h2>Set the height and width of an element</h2>
    <div>This box is 200 pixels tall and has a width of 50% of the screen.</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 500px;
        background-color: powderblue;
      }
    </style>
  </head>
  <body>
    <h2>Set the height and width of an element</h2>
    <div>This box is 100 pixels tall and 500 pixels wide.</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        max-width: 500px;
        height: 100px;
        background-color: powderblue;
      }
    </style>
  </head>
  <body>
    <h2>Set the max-width of an element</h2>
    <div>This box is 100 pixels tall and has a maximum width of 500 pixels.</div>
    <p>Resize the browser window to see the effect.</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Height and Width

CSS Setting height and width

CSS height and width Values

CSS height and width Examples

Setting max-width

Web Development