CSS Height, Width and Max-width

Sure! CSS properties like height, width, and max-width are used to control the dimensions of HTML elements. Here’s a breakdown with examples:

1. height

The height property sets the height of an element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Height Example</title>
    <style>
        .box {
            height: 150px;
            width: 150px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, the .box element will have a fixed height of 150 pixels.

2. width

The width property sets the width of an element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Width Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, the .box element will have a fixed width of 200 pixels.

3. max-width

The max-width property sets the maximum width an element can have. It ensures that the element doesn't exceed this width even if its content would naturally make it wider.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Max-width Example</title>
    <style>
        .box {
            max-width: 300px;
            width: 100%;
            height: 200px;
            background-color: lightgreen;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        This box will never be wider than 300 pixels, even though its width is set to 100% of its container.
    </div>
</body>
</html>

In this example, the .box element will adjust its width according to its container (100% width) but will not exceed 300 pixels due to the max-width property.

Summary

• height and width set fixed dimensions for elements.
• max-width restricts the maximum width an element can take, allowing for responsive design by constraining the size within specified limits.