Skip to content
Related Articles

Related Articles

CSS | Height and Width
  • Last Updated : 03 Dec, 2018

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:




<!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:




<!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.




    <!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:




    <!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 maxumum height of the box. It’s effect can be seen by resizing the browsers.
    Example:




    <!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:




    <!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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :