Width and Height Properties

Width - Height Properties

Width sets the width of the objects, and height sets the height. Width and height can be expressed in px, inches, cm, percent (%)...

If we do not use an expression such as px, %, etc., the browser accepts the value as a percentage. So in the example below, width means 500%.

width:500;

Html elements automatically increase or decrease height according to their content. However, sometimes we may want to determine the height ourselves.

For example, we have placed boxes next to each other on our page, and some of the boxes have little content and some have a lot of content. In this case, the height of each of the boxes will be different. Using Height we can equalize the height of all of them.

Also, maximum and minimum values ​​for height and width can be specified:

max-width: The maximum width of the objects,

max-height: The maximum height that objects can reach,

When we set the maximum value, we say that those objects will normally have dimensions according to their content, but even if the content increases, the width or height we specified cannot be exceeded.

min-height: What is the minimum height of the objects, even if the contents take up less space,

min-width: Allows us to specify the minimum width of objects , even when their contents take up little space.

When we specify a minimum width or height, even if the content of that element is very small, we ensure that it takes up at least as much space as we specified.

Note: It's good to know that the width attribute may not work for some tags. In such a case, the display property of that element can be set to a value such as block. The concepts of block and inline, which will be explained in the following topics, will enable you to better understand this subject. 

EXERCISES