Tidadigi Logo

CSS | inset-inline-end Property

Thuộc tính inset-inline-end là một thuộc tính tích hợp sẵn trong CSS. Nó dùng để xác định offset cuối dòng logic, không phải cho offset khối. 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-inline-end: 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, v.v. Các giá trị âm được cho phép. Giá trị mặc định của nó là 0px.
  • percentage: Đặt chiều dài theo tỷ lệ 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-inline-end.
  • initial: Được sử dụng để đặt giá trị của thuộc tính inset-inline-end về giá trị mặc định của nó.
  • inherit: Được sử dụng khi muốn phần tử kế thừa thuộc tính inset-inline-end từ phần tử cha của nó.
  • unset: Được sử dụng để bỏ đặt inset-inline-end mặc định.

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

Ví dụ 1:

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

Kết quả:

 css-inset-inline-end-property 

Ví dụ 2:

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

Kết quả:

 css-inset-inline-end-property

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

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

Last Updated : 20/07/2025