Height width in css | Height and width property – easy explanation
When working on a web page, one of the most basic things we come across is height and width properties. As the name specifies these properties are used to specify the height and width of an element. In today’s guide, we’ll take a closer look at these properties and learn how to implement height, width, min/max – height, width. As you make your way through today’s guide towards the conclusion you will be an expert at how and when to use these properties.
Basics of Height & width in css:
First, let’s take a look at the height and width individually and understand their role in web-dev.
Height property in css –
Height property specifies the vertical length of an element. By default when we create an element its height is set to ‘auto’. This means that the browser will decide how much height the should element get.
Syntax of height in css –
Width property in css –
Width property specifies the horizontal length of an element. By default, it is also set to auto.
Syntax of weight in css:
Values of the Height and Width property
- Auto – This is the default. The browser calculates the height and width.
- Length – This defines the height/width in px, cm etc.
- Percentage – This defines the height/width in percent of the containing block.
- Inherit – This sets the height/width to its default value
- Initial – This inherits the value passed to the parent element.
Let’s take a look at an example of these properties:
Max- width / height in css :
Min- width / height :
Min- width/height does the same job as of max-width/height but vice versa. This deals with the minimum length of height/width of elements to maintain a minimum ratio when the windows are much smaller.