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:
<!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:
<!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.
<!DOCTYPE html><html><head><title>max-width of element</title><style>.GFG {max-width:500px;border:2px solid black;}</style></head><body><divclass="GFG"><h3>GeeksforGeeks</h3><p>GeeksforGeeks is a computer science platformwhere you can learn programming. It is a ComputerScience portal for geeks. It contains well written,well thought and well explained computer scienceand 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:<!DOCTYPE html><html><head><title>min-width of element</title><style>.GFG {min-width:400px;border:2px solid black;}</style></head><body><divclass="GFG"><h3>GeeksforGeeks</h3><p>GeeksforGeeks is a computer science platformwhere you can learn programming. It is a ComputerScience portal for geeks. It contains well written,well thought and well explained computer scienceand 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 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><divclass="GFG"><h3>GeeksforGeeks</h3><p>GeeksforGeeks is a computer science platformwhere you can learn programming. It is a ComputerScience portal for geeks. It contains well written,well thought and well explained computer scienceand 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:<!DOCTYPE html><html><head><title>min-height of element</title><style>.GFG {min-height:50px;border:2px solid black;}</style></head><body><divclass="GFG"><h3>GeeksforGeeks</h3><p>GeeksforGeeks is a computer science platformwhere you can learn programming. It is a ComputerScience portal for geeks. It contains well written,well thought and well explained computer scienceand programming articles, quizzes etc.</p></body></html>Output:
