Skip to content
Related Articles

Related Articles

CSS | Height and Width

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

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!