CSS Width and Height | Height Width and css explanation – codewithrandom

CSS Width and Height | Height Width and css explanation – codewithrandom

The width and height CSS properties set the width/height of an element.

By default, these properties define the width/height of the content area/box.

Valid Values:

  • <length>
  • <percentage>
  • auto: calculates and selects a width/height for the element
  • max-content: the intrinsic preferred width
  • min-content: the intrinsic minimum width
  • available: containing block width minus horizontal margin, border and padding
  • fit-content: the larger of: the intrinsic minimum width; the smaller of the intrinsic preferred width and the available width

Note: The width and height attributes only set the area inside the padding, border and margin of the element and does not include them.


Example:

Here is an example of the width CSS property:


 #element1 {  
width: 200px;
}
#element2 {
width: 5em;
}
#element3 {
width: 75%;
}
#element4 {
width: auto;
}


Example:

Here is an example of the height CSS property:


 #element1 {  
height: 200px;
}
#element2 {
height: 5em;
}
#element3 {
height: 75%;
}
#element4 {
height: auto;
}


Minimum and Maximum Widths and Heights

The following properties define CSS minimum and maximum widths and heights.

  • min-width: sets the minimum width of an element
  • max-width: sets the maximum width of an element
  • min-height: sets the minimum height of an element
  • max-height: sets the maximum height of an element

Valid Values:

  • <length>
  • <percentage>

Here is an example of the min-width CSS property.

 h1 {  
min-width: 500px;
background: lightblue;
}

Here is an example of the max-width CSS property.

 p {  
max-width: 250px;
background: lightgreen;
}

Here is an example of the min-height CSS property.

 h1 {  
min-height: 500px;
background: lightblue;
}

Here is an example of the max-height CSS property.

 h3 {  
max-height: 70px;
background: lightgreen;
/* let's hide the overlapping content */
overflow: hidden;
}

Check it more




Share on:

Leave a Comment