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

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






Post a Comment

Previous Post Next Post