ADVERTISEMENT

Height and Width Property Explanation in CSS

Telegram Group Join Now

ADVERTISEMENT

Height and Width Property Explanation in CSS

Height and Width Property Explanation in CSS
Height and Width Property Explanation in CSS

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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 –

ADVERTISEMENT

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

ADVERTISEMENT

Syntax of Weight in Css:

ADVERTISEMENT

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 :

ADVERTISEMENT

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

ADVERTISEMENT

Syntax :

ADVERTISEMENT

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.

ADVERTISEMENT

5+ HTML CSS Projects With Source Code

ADVERTISEMENT

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.

50+ HTML, CSS & JavaScript Projects With Source Code

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

Written by: @Om Bandiwan

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT