Height and width in css

Padding in CSS Text in CSS

In CSS, the height and width properties are used to set the dimensions of an element. They define the size of the content area, excluding padding, border, and margin.

Properties

height: Specifies the height of an element's content area.
width: Specifies the width of an element's content area

Syntax

/* Setting height */
element {
  height: value;
}

/* Setting width */
element {
  width: value;
}

Values

length: Specifies the height/width in units like pixels (px), ems (em), rems (rem), etc.
percentage: Specifies the height/width as a percentage of the containing block's height/width.
auto: The default value. The browser calculates the height/width.
max-content, min-content, fit-content: These values are used for flexible sizing based on the content.

Setting Fixed Dimensions:

<style>
.box {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}
</style>
<div class="box">
This box has height and width set to 50% of its container.
</div>

This sets the .box element to be 200 pixels wide and 100 pixels tall.

Using Percentage:

<style>
.box {
  width: 50%;
  height: 50%;
  border: 2px solid black;
}
</style>
<div class="box">
This box has height and width set to 50% of its container.
</div>

This sets the .box element's width to 50% of its containing element's width and its height to 50% of its containing element's height.

Setting vh and clac() Dimensions:

Using CSS to set height and width with vh (viewport height) and calc() allows you to create responsive layouts that adapt to different screen sizes.

The vh unit is a percentage of the viewport height, where 1vh equals 1% of the viewport height.

The calc() function allows you to perform calculations to determine the size of an element dynamically.

Using `vh` for Height

Setting an element's height in vh ensures that the element's height is proportional to the height of the viewport.

<!DOCTYPE html>
<html>
<head>
    <style>
        .vh-box {
            width: 50vw; /* 50% of the viewport width */
            height: 50vh; /* 50% of the viewport height */
            background-color: lightblue;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="vh-box">
        This box is 50vh high and 50vw wide.
    </div>
</body>
</html>

the box will always occupy 50% of the viewport's height and width, regardless of the screen size.

Using `calc()` for Height and Width

The calc() function allows you to combine different units and perform calculations to set the height and width.

<!DOCTYPE html>
<html>
<head>
    <style>
        .calc-box {
            width: calc(100% - 50px); /* 100% of the container's width minus 50px */
            height: calc(50vh - 20px); /* 50% of the viewport height minus 20px */
            background-color: lightcoral;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="calc-box">
        This box uses calc() for width and height.
    </div>
</body>
</html>

the box will have a width that is the full width of its container minus 50px, and a height that is 50% of the viewport height minus 20px.

Practical Example

Here's an HTML and CSS example demonstrating the height and width properties:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Height and Width Example</title>
  <style>
    .container {
      width: 400px;
      height: 300px;
      border: 2px solid black;
      padding: 20px;
      background-color: lightgray;
    }

    .box {
      width: 50%;
      height: 50%;
      border: 2px solid blue;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      This box has height and width set to 50% of its container.
    </div>
  </div>
</body>
</html>

In this example:

The .container element is 400 pixels wide and 300 pixels tall, with padding of 20 pixels and a light gray background.
The .box element inside the container has its width and height set to 50% of the container's width and height, respectively, making it responsive to the container's dimensions.