Skip to content
Related Articles

Related Articles

CSS | Height and Width

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Jan, 2022

Height and Width in CSS are used to set the height and width of boxes. It’s value can be set using length, percentage or auto.
 

Width and height

Example: 
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>width and height</title>
      <style>
         .GFG{
         height: 120px;
         width: 50%;
         border: 5px solid black;
         padding-left: 50px;
         padding-top: 50px;
         font-size:42px;
         font-weight:bold;
         color:green;
         margin-left:50px;
         margin-top:50px;
         }
      </style>
   </head>
   <body>
      <div class = "GFG"> GeeksforGeeks </div>
   </body>
</html>

Output:
 

width and height

Height and width of Image: It is used to set the height and width of an image. It’s value can be in px, cm, percent, … etc. 
Example: 
 

html




<!DOCTYPE html>
<html>
   <head>
      <title>Height and width of image</title>
      <style>
         .GFG {
         width:300px;
         height:200px;
         border:3px solid black;
         }
      </style>
   </head>
   <body>
      <h3>Set the width and height of an Image</h3>
      <img class="GFG" src="4.jpg">
   </body>
</html>

Output:
 

Height and width of an image

Set max-width and min-width of an element: 
 

  • max-width: It is used to set the maximum width of the box. It’s effect can be seen by resizing the browsers. 
     

html




<!DOCTYPE html>
<html>
   <head>
      <title>max-width of element</title>
      <style>
         .GFG {
         max-width:500px;
         border:2px solid black;
         }
      </style>
   </head>
   <body>
      <div class="GFG">
      <h3>GeeksforGeeks</h3>
      <p>GeeksforGeeks is a computer science platform
         where you can learn programming. It is a Computer
         Science portal for geeks. It contains well written,
         well thought and well explained computer science
         and programming articles, quizzes etc.
      </p>
   </body>
</html>

  • Output:
     

max-width

  •  
  • min-width: It is used to set the minimum width of the box. It’s effect can be seen by resizing the browsers. 
    Example: 
     

html




<!DOCTYPE html>
<html>
   <head>
      <title>min-width of element</title>
      <style>
         .GFG {
         min-width:400px;
         border:2px solid black;
         }
      </style>
   </head>
   <body>
      <div class="GFG">
      <h3>GeeksforGeeks</h3>
      <p>GeeksforGeeks is a computer science platform
         where you can learn programming. It is a Computer
         Science portal for geeks. It contains well written,
         well thought and well explained computer science
         and programming articles, quizzes etc.
      </p>
   </body>
</html>

  • Output:
     

min-width

  •  

Set max-height and min-height of an element: 
 

  • max-height: It is used to set the maximum height of the box. It’s effect can be seen by resizing the browsers. 
    Example: 
     

html




<!DOCTYPE html>
<html>
   <head>
      <title>max-height of element</title>
      <style>
         .GFG {
         max-height:100px;
         border:2px solid black;
         }
      </style>
   </head>
   <body>
      <div class="GFG">
      <h3>GeeksforGeeks</h3>
      <p>GeeksforGeeks is a computer science platform
         where you can learn programming. It is a Computer
         Science portal for geeks. It contains well written,
         well thought and well explained computer science
         and programming articles, quizzes etc.
      </p>
   </body>
</html>

  • Output:
     

max-height

  •  
  • min-height: It is used to set the minimum height of the box. It’s effect can be seen by resizing the browsers. 
    Example: 
     

html




<!DOCTYPE html>
<html>
   <head>
      <title>min-height of element</title>
      <style>
         .GFG {
         min-height:50px;
         border:2px solid black;
         }
      </style>
   </head>
   <body>
      <div class="GFG">
      <h3>GeeksforGeeks</h3>
      <p>GeeksforGeeks is a computer science platform
         where you can learn programming. It is a Computer
         Science portal for geeks. It contains well written,
         well thought and well explained computer science
         and programming articles, quizzes etc.
      </p>
   </body>
</html>

  • Output: 
     

min-height

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!