Thuộc tính CSS inset-inline-end

Định nghĩa và cách sử dụng

inset-inline-end thuộc tính để thiết lập khoảng cách từ phần cuối của phần tử trong hướng dòng với phần tử cha.

Lưu ý:Để thuộc tính này hoạt động, bạn phải chỉ định position Thuộc tính

CSS inset-inline và inset-block thuộc tính tương ứng với thuộc tính của CSS top,bottom,left và right Tương tự như thuộc tính này, nhưng inset-block và inset-inline Thuộc tính này phụ thuộc vào hướng khối và hướng dòng.

Lưu ý:thuộc tính CSS liên quan writing-mode và direction Định nghĩa hướng dòng. Điều này ảnh hưởng đến vị trí cuối của phần tử trong hướng dòng và inset-inline-end Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng dòng là từ trái sang phải, hướng khối là xuống.

Thực tế

Ví dụ 1

Đặt khoảng cách từ phần cuối của phần tử <div> đã định vị trong hướng dòng với phần tử cha:

div {
  inset-inline-end: 50px;
}

Thử ngay

Ví dụ 2

Khi phần tử <div> của bạn writing-mode Khi giá trị thuộc tính được thiết lập là vertical-rl, hướng dòng là xuống. Kết quả là phần cuối của phần tử di chuyển từ bên phải xuống dưới:

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

Thử ngay

Ví dụ 3

Khi phần tử <div> của bạn direction Khi giá trị thuộc tính được thiết lập là rtl, hướng dòng là từ phải sang trái. Kết quả là phần cuối của phần tử di chuyển từ bên phải sang bên trái:

div {
  inset-inline-end: 50px;
  direction: rtl;
}

Thử ngay

Cú pháp CSS

inset-inline-end: auto|length|initial|inherit;

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Trang liên quan

Hướng dẫn：Định vị CSS

Tham khảo：Thuộc tính position của CSS

Tham khảo：Thuộc tính direction của CSS

Tham khảo：Thuộc tính writing-mode CSS