CSS Width/Height


Go to main Page

Width and Height in CSS

Width and height is neccessory to arrange elements perfectlyin our webpage.

CSS width and height properties are used to adjust the width and height of elements in the webpage.

CSS width and height properties do not include margin, padding, and borders.


CSS width and height properties

  1. auto - This is default. The browser calculates the height and width.
  2. length - Defines the height/width in px, cm etc.
  3. % - Defines the height/width in percent of the containing block.
  4. initial - Sets the height/width to its default value.
  5. inherit - The height/width will be inherited from its parent value.

Setting width and height of container


div{
   width: 400px;
   height: 50%;
   color:lightcoral;
   
}


Setting width and height of image


img{
   width: 40rem; /* 1rem is equal to 10px */
   height: 50%;
   color:lightcoral;
   
}


Max-width property in CSS

The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).


div{
   max-width: 400px;
   height: 50%;
   color:lightcoral;
   
}