Height and Width in CSS

« Prev Next »

Width and height properties are CSS properties that are used to set the dimensions of an element in a document.

The width and height property of an element can be set by using different measurement units. The width and height properties work best with block-level elements.

css-height-and-width

CSS Width

The width property sets the horizontal size of an element.

 

Syntax

selector {
  width: value;
}

value – Defines the width of the element. It can be in px, %, em, vw, or other units.

 

Common Units for width

Unit Description
px Pixels (fixed width)
% Percentage relative to the parent element’s width
em Relative to the font-size of the element
vw Relative to the viewport width (1vw = 1% of the viewport width)
rem Relative to the font-size of the root element

Example

div {
  width: 300px; /* Fixed width of 300px */
}
Run ›

CSS Height

The height property sets the vertical size of an element.

 

selector {
  height: value;
}

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 50%;  /* 50% of the parent element’s width */
      height: 200px;  /* Fixed height of 200px */
      background-color: lightblue;
    }
  </style>
</head>
<body>

<div>This div has a width of 50% and a height of 200px.</div>

</body>
</html>
Run ›

Common Units for height

Unit Description
px Pixels (fixed height)
% Percentage relative to the parent element’s height
em Relative to the font-size of the element
vh Relative to the viewport height (1vh = 1% of the viewport height)
rem Relative to the font-size of the root element
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.