Tidadigi Logo

CSS Height and Width

Trong CSS, `Height` và `Width` được dùng để đặt chiều cao, chiều rộng cho các phần tử. Giá trị của chúng có thể được thiết lập bằng length, percentage hoặc auto.

css-height-and-width

Width and Height

Các thuộc tính `width` và `height` trong CSS dùng để xác định kích thước của một phần tử. Giá trị có thể đặt bằng nhiều đơn vị khác nhau như pixel (px), phần trăm (%),...


Example: Ví dụ này minh họa cách sử dụng `CSS Height` và `Width`.

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:

css-height-and-width

Height and Width of Image

Để thiết lập chiều cao và chiều rộng của ảnh, sử dụng các thuộc tính `width` và `height`. Giá trị này có thể được chỉ định bằng pixel, phần trăm hoặc các đơn vị khác.

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:

css-height-and-width

Set max-width and min-width

. max-width:

Thuộc tính `max-width` dùng để đặt chiều rộng tối đa của một phần tử. Bạn có thể thấy rõ hiệu ứng này khi thay đổi kích thước cửa sổ trình duyệt.

Example: 

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>
   </div>
</body>

</html>

Output:

css-height-and-width

. min-width:

Thuộc tính `min-width` dùng để đặt chiều rộng tối thiểu của một phần tử. Bạn có thể thấy rõ hiệu ứng này khi thay đổi kích thước cửa sổ trình duyệt.

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>
    </div>
</body>

</html>

Output:

css-height-and-width

Set max-height and min-height

. max-height:

Thuộc tính `max-height` dùng để đặt chiều cao tối đa của một phần tử. Bạn có thể thấy rõ hiệu ứng này khi thay đổi kích thước cửa sổ trình duyệt.

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>
    </div>
</body>

</html>

Output:

css-height-and-width

. min-height:

Thuộc tính `min-height` dùng để đặt chiều cao tối thiểu của một phần tử. Bạn có thể thấy rõ hiệu ứng này khi thay đổi kích thước cửa sổ trình duyệt.

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>
    </div>
</body>

</html>

Output: 

css-height-and-width

Các thuộc tính CSS cho `height` và `width`, bao gồm `max-width`, `min-width`, `max-height` và `min-height`, cung cấp nhiều cách để kiểm soát kích thước phần tử. Những thuộc tính này rất quan trọng để tạo các thiết kế đáp ứng, phù hợp với các kích thước màn hình khác nhau. Bằng cách nắm vững các thuộc tính này, nhà phát triển có thể đảm bảo nội dung web vừa hấp dẫn, vừa hoạt động tốt.

Supported Browsers

Các thuộc tính `width`, `height`, `max-width`, `min-width`, `max-height` và `min-height` được hỗ trợ bởi các trình duyệt chính:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge
  • Opera

Last Updated : 21/07/2025