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.
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:
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:
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:
- 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:
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:
- 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:
Please Login to comment...