Width and Height

The width and height properties in CSS define the Width and Height of HTML elements.

max-width and max-height limit an element’s maximum width and height, while min-width and min-height set the minimum width and height.

Units for defining width and height include pixels(px) and percentages(%).

"Pixels" are the smallest units displayed on a screen, providing a fixed size regardless of device and resolution, while "percentages" set the size relative to the element's parent.

For more detailed information about units, refer to Chapter 2.

width and height specify the horizontal width and vertical height of an element, respectively.

Example code:

Copy
.structure {
  width: 300px; /* Horizontal width of the structure is 300 pixels */
  height: 150px; /* Vertical height of the structure is 150 pixels */
}

Adjusting the size of elements in web design is crucial for enhancing user experience and implementing responsive design.

You can limit the size of elements using the max-width, max-height, min-width, and min-height properties.

The max-width property sets the maximum width of an element.

It ensures the element's width does not exceed the specified value.

Copy
.box {
  max-width: 300px;
  width: 100%;
}

In the example above, the box's width expands based on the width of its parent element but does not exceed 300px.

The max-height property sets the maximum height of an element.

It ensures the element's height does not exceed the specified value.

Copy
.box {
  max-height: 150px;
  height: auto;
}

The min-width property specifies the minimum width of an element.

It guarantees that the element's width does not fall below the specified value.

Copy
.box {
  min-width: 200px;
  width: 100%;
}

In the example above, the width of the box decreases based on the width of its parent element but does not go below 200px.

The min-height property specifies the minimum height of an element.

It guarantees that the element's height does not fall below the specified value.

Copy
.box {
  min-height: 100px;
  height: auto;
}

Follow the highlighted sections of the code to try inputs yourself.