CSS | Высота и ширина

Опубликовано: 1 Марта, 2022

Высота и ширина в CSS используются для установки высоты и ширины ящиков. Это значение может быть установлено с использованием длины, процента или авто.

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>

Выход:

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>

Выход:

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:

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:

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:

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:

HTML CSS

CSS | Высота и ширина

РЕКОМЕНДУЕМЫЕ СТАТЬИ