Tutorialspoint.dev

CSS | Height and Width

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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter