Tidadigi Logo

CSS height Property

Thuộc tính height được dùng để thiết lập chiều cao của một phần tử. Thuộc tính height không bao gồm padding, margin và border.

Cú pháp: 

height: auto|length|initial|inherit;

Giá trị mặc định: auto 

Giá trị thuộc tính: 

  • auto: Dùng để thiết lập thuộc tính height về giá trị mặc định của nó. Nếu thuộc tính height được đặt là auto, trình duyệt sẽ tính chiều cao phần tử.
  • length: Dùng để thiết lập chiều cao phần tử theo px, cm,... Độ dài không thể âm.
  • initial: Dùng để thiết lập thuộc tính height về giá trị mặc định.
  • inherit: Dùng để kế thừa thuộc tính height từ phần tử cha.

Ví dụ: Trong ví dụ này, ta sử dụng height: auto;

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS height Property
    </title>

    <style>
        .Geeks {
            height: auto;
            color: white;
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>

<body>
    <h2>CSS height Property</h2>

    <div class="Geeks">
        GeeksforGeeks: A computer science portal
    </div>
</body>
</html>

Kết quả: 

css-height-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính height: length;

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS height Property
    </title>

    <style>
        .Geeks {
            height: 100px;
            color: white;
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>

<body>
    <h2>CSS height Property</h2>

    <div class="Geeks">
        GeeksforGeeks: A computer science portal
    </div>
</body>
</html>

Kết quả: 

css-height-property

Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính height: initial;

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS height Property
    </title>

    <style>
        .Geeks {
            height: initial;
            color: white;
            font-size: 30px;
            background-color: green;
        }
    </style>
</head>

<body>
    <h2>CSS height Property</h2>

    <div class="Geeks">
        GeeksforGeeks: A computer science portal
    </div>
</body>
</html>

Kết quả: 

css-height-property

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính height được liệt kê dưới đây:

  • Google Chrome 1.0 trở lên
  • Edge 12.0 trở lên
  • Internet Explorer 4.0 trở lên
  • Firefox 1.0 trở lên
  • Safari 1.0 trở lên
  • Opera 7.0 trở lên

Last Updated : 21/07/2025