Height and Width Property Explanation in CSS

 

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, and width.

As you make your way through today’s guide toward 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 development.

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 –

The width property specifies the horizontal length of an element. By default, it is also set to auto.

Responsive Gym Website Using HTML ,CSS & JavaScript

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:

this Preview Html and Css Code

<style>
  div {
  text-align:center;
  background:red;
  height:200px;
  width:auto;
  }
</style>
<div> Hello world </div>

Output

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.

5+ HTML CSS Projects With Source Code

Syntax :

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