Course Content
CSS Basic
0/1
CSS Selectors
0/1
CSS Comments
0/1
CSS Backgrounds
0/1
CSS Borders
0/1
CSS Outline
0/1
CSS Fonts
0/1
CSS Height and Width
0/1
CSS Margins and Paddings
0/2
CSS Icons
0/1
CSS Links
0/1
CSS Lists
0/1
CSS Tables
0/1
CSS Display Properties
0/1
CSS Max-Width Property
0/1
CSS Positioning Elements
0/1
CSS Z-Index Property
0/1
CSS Overflow
0/1
CSS Float
0/1
CSS Opacity
0/1
CSS Forms
0/1
CSS Dropdowns
0/1
CSS Buttons
0/1
CSS Media Queries
0/1
About Lesson

Definition:

The height and width properties in CSS are used to set the height and width of an element, respectively.

Syntax:

HTML
selector {
height: value;
width: value;
}

value can be specified in various units such as pixels (px), percentage (%), em, rem, etc.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Set height and width for a div with the class 'box' */
    .box {
      height: 100px;
      width: 200px;
      background-color: lightblue;
      border: 2px solid navy;
      margin: 20px;
      padding: 10px;
    }
    /* Set height and width for an image with the class 'image' */
    .image {
      height: 150px;
      width: 300px;
    }
  </style>
  <title>Height and Width Example</title>
</head>
<body>
  <div class="box">
    This is a box with a specified height and width.
  </div>
  <img class="image" src="f.jpeg" alt="Example Image">
</body>
</html>

output: