Height width in css | Height and width property – easy explanation

by

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 –

    height: value;

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:

    width: value;

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 :

Max-width/height property is used to set the maximum width or height of the element.
This property is used to set the uppermost/maximum limit/length to the height or width property. It is primarily used so that the element does not cross a specific height or width

 Syntax :

    max-height: value ;
    max-width : value ;

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.

Syntax :

    min-height: value ;
    min-width: values;

Note: both the max/min properties override the default height or width after reaching the limit.

Conclusion: 

This guide pretty much covers all the basics about height and width for the implementation of these properties. For a better understanding of how to use these properties you should learn and understand the CSS Box Model, you can refer to this link to learn about CSS Box Model.


Let me know in the comments below if you have any queries or want to report any errors.

Written by: @Om Bandiwan


Share on:

Leave a Comment