CSS Height and Width

The CSS Height and Width define the dimensions of an element, controlling how it appears on a web page. Understanding these properties is crucial for creating responsive, well-structured layouts.

Table of Contents

1. CSS Height and Width Properties

These properties define the size of an element’s content area.

Basic Syntax:

selector {
  width: value;
  height: value;
}

CSS

width: Specifies how wide an element should be.
height: Specifies how tall an element should be.

For example:

<!DOCTYPE html>
<html>

<head>
    <title>width and height</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div class="box">CodeWithKailas</div>
</body>

</html>

CSS

output:

CodeWithKailas

This sets the width of .box to 200 pixels and height to 100 pixels.

2. Units Used for Width and Height

There are two main types of units: absolute and relative.

a. Absolute Units

These units specify a fixed size, meaning the element will not adjust based on the screen size.

Unit	Description
px	Pixels (Most commonly used)
cm	Centimeters
mm	Millimeters
in	Inches
pt	Points (1 pt = 1/72 inch)
pc	Picas (1 pc = 12 pt)

Example:

.box {
  width: 300px;
  height: 150px;
}

CSS

Here, .box will always be 300 pixels wide and 150 pixels tall, no matter the screen size.

b. Relative Units

These units allow elements to adjust dynamically depending on the screen size or parent container.

Unit	Description
%	Percentage of the parent element’s size
vw	Viewport width (1vw = 1% of the screen width)
vh	Viewport height (1vh = 1% of the screen height)
vmin	Minimum of `vw` and `vh`
vmax	Maximum of `vw` and `vh`
em	Relative to the parent element’s font size
rem	Relative to the root element’s font size

Example:

.container {
  width: 80%;
  height: 50vh;
  background-color: lightgray;
}

CSS

width: 80% → The .container will take 80% of the width of its parent element.
height: 50vh → The height will be 50% of the viewport height.

3. Max and Min Width/Height

CSS provides max-width, min-width, max-height, and min-height to set constraints.

Example:

.box {
  width: 100%;
  max-width: 500px;
  height: auto;
}

CSS

width: 100% → The box will stretch to the full width of its parent.
max-width: 500px → The width will never exceed 500 pixels.
height: auto → The height will adjust dynamically.

Why Use These?

Using max-width and min-width ensures that an element remains responsive:

Prevents elements from becoming too wide (max-width).
Ensures elements are not too small (min-width).

4. Auto and Inherit

a. auto

Lets the browser decide the width or height automatically.
Useful for maintaining aspect ratios.

Example:

.box {
  width: auto;
  height: auto;
}

CSS

b. inherit

Makes the element inherit the width or height from its parent.

Example:

.parent {
  width: 400px;
}

.child {
  width: inherit;
}

CSS

The .child element will have the same width as .parent (400px).

5. Special Cases for Width and Height

a. Block vs Inline Elements

By default:

Block elements (div, p, section) take up the full width of the parent container.
Inline elements (span, a, strong) do not support width and height unless display: block; or display: inline-block; is applied.

Example:

span {
  width: 100px;  /* Will not work because span is inline */
}

span.block {
  display: block;
  width: 100px; /* Works */
}

CSS

b. Overflow Property

If the content exceeds the set width or height, use overflow to control it.

Example:

.box {
  width: 150px;
  height: 100px;
  overflow: scroll;
}

CSS

hidden: Hides overflowing content.
scroll: Adds a scrollbar.
auto: Adds a scrollbar only if needed.

6. Responsive Design with Width and Height

To make elements responsive, use relative units.

Example: Full-Screen Section

.fullscreen {
  width: 100vw;
  height: 100vh;
  background-color: navy;
}

CSS

This will cover the entire screen.

Example: Flexible Grid Layout

.container {
  display: flex;
}

.box {
  width: 25%;
  height: 200px;
  background-color: lightcoral;
}

CSS

Each .box will take 25% of the .container width.

7. Common Mistakes to Avoid

Mistake	Solution
Setting width: 100% inside a max-width container	Use width: auto;
Using px for all sizes (not responsive)	Use % or vw/vh for better responsiveness
Not considering box-sizing	Use box-sizing: border-box; to include padding and border in width calculations

Example of box-sizing:

* {
  box-sizing: border-box;
}

CSS

8. Practical Example

Creating a Responsive Card

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .card {
            width: 90%;
            max-width: 400px;
            height: auto;
            padding: 20px;
            background: #58cece;
            border-radius: 10px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="card">CodeWithKailas</div>
</body>

</html>

CSS

output:

CodeWithKailas

This card will:

Be 90% of the parent width, but never exceed 400px.
Have an adaptive height (auto).
Have padding, border-radius, and shadow for aesthetics.

Conclusion

Use px for fixed sizes and %, vw, or vh for responsive designs.
max-width and min-width help in making elements responsive.
Use auto for dynamic sizing.
Combine width, height, and box-sizing for better layouts.