Width and Height

CSS has properties that allow you to set web page elements to a certain width and height. With their help, you can set fixed sizes of elements, whether it is a sidebar, an image, a table, or any other block.

Width

The width of the block elements can be set with the width property. This functionality is also available for some inline elements, the appearance and size of which are determined by the external content. A possible example is the <img> tag that allows you to insert an image into a page.

The property may take all length units accepted in CSS as its values, for example, pixels. The syntax of this property is simple, clear, and easy to remember:

p {
  width: 100px;
}

The code written above sets the p width to 100 pixels. Schematically, the element will look like this:

Minimum and maximum width

You can set the minimum width of the element. If you set it, the width of the item will be no less than the selected size, even if you access the web page from small devices. It is possible thanks to the min-width property:

p {
  min-width: 10vh;
}

You can also set the maximum width for the element you want. There is a property max-width for this:

p {
  max-width: 80vh;
}

These properties set only the minimum and maximum possible width, not the strictly defined width. They are usually used to make the web page look like you want it to look like on phones and computers with different screen sizes.

Height

To set the height value of the blocks, the height property is used. It can also be applied to elements the size of which is determined by their external content. The property takes any CSS length units as values.

Consider the syntax of this property:

div {
  height: 50px;
}

In the example above, we set the <div> element to the height of 50 pixels. Schematically, this can be represented as follows:

Minimum and maximum height

In order to adjust the height of the elements on the screens with different resolutions, we can use a number of CSS properties.
For example, to set the minimum height, use min-height:

div {
  min-height: 50px;
}

The max-height property is responsible for setting the maximum height of the element:

div {
  max-height: 50px;
}

Conclusion

CSS provides a huge number of properties responsible for the design of web pages. Most of them are easy to remember for people who speak English. These properties include height and width. The frontend developers frequently need to manipulate the size of the elements, so now you know how to cope with one of the very common developer tasks.