Tidadigi Logo

CSS | inset-inline-start Property

Thuộc tính inset-inline-start property trong CSS dùng để định nghĩa offset inline start logic. Nó không dùng cho offset block hoặc block logic. Thuộc tính này có thể áp dụng cho mọi thuộc tính writing-mode.

Cú pháp:

inset-inline-start: length|percentage|auto|inherit|initial|unset;

Giá trị thuộc tính:

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

Ví dụ dưới đây minh họa inset-inline-start property trong CSS.

Ví dụ 1:

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

Đầu ra:

 css-inset-inline-start-property 

Ví dụ 2:

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

Đầu ra:

 css-inset-inline-start-property 

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ inset-inline-start property được liệt kê dưới đây:

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

Last Updated : 20/07/2025