Tidadigi Logo

CSS | inset-block Property

Thuộc tính inset-block trong CSS dùng để định nghĩa offset đầu và cuối của block logic. Nó không dành cho inline offset hoặc block logic. Thuộc tính này có thể áp dụng cho bất kỳ thuộc tính writing-mode nào.

Cú pháp:

inset-block: length | percentage | auto | inherit | initial | unset;

Giá trị thuộc tính:

  • length: Đặt một giá trị cố định được xác định bằng px, cm, pt,... Giá trị âm cũng được cho phép. Giá trị mặc định của nó là 0px.
  • percentage: Tương tự như length, nhưng nó được đặt theo phần trăm kích thước cửa sổ.
  • auto: Được sử dụng khi muốn trình duyệt xác định inset-block.
  • initial: Dùng để đặt giá trị của thuộc tính inset-block về giá trị mặc định.
  • inherit: Được sử dụng khi muốn phần tử kế thừa thuộc tính inset-block từ phần tử cha.
  • unset: Dùng để bỏ đặt giá trị mặc định của thuộc tính inset-block.

Các ví dụ dưới đây minh họa thuộc tính inset-block trong CSS:

Ví dụ 1:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset-block Property</title>
    <style>
        h1 {
            color: green;
        }
        
        div {
            background-color: green;
            width: 200px;
            height: 120px;
        }
        
        .one {
            position: relative;
            inset-block: 30px 50px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset-block Property</b>
        <br><br>
        <div>
            <p class="one">
                A Computer Science Portal for Geeks
            </p>
        </div>
    </center>
</body>
</html>

Đầu ra:

 css-inset-block-property 

Ví dụ 2:

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>CSS | inset-block Property</title>
    <style>
        h1 {
            color: green;
        }
        
        div {
            background-color: green;
            width: 200px;
            height: 120px;
        }
        
        .one {
            writing-mode: vertical-rl;
            position: relative;
            inset-block: 30px 50px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | inset-block Property</b>
        <br><br>
        <div>
            <p class="one">
                A Computer Science Portal for Geeks
            </p>
        </div>
    </center>
</body>
</html>

Đầu ra:

 css-inset-block-property 

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính inset-block được liệt kê bên dưới:

  • Firefox 63+
  • Google Chrome 87+
  • Edge 87+
  • Opera 73+
  • Safari 14.1+

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block


Last Updated : 20/07/2025