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

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

inset-inline-start Thuộc tính thiết lập khoảng cách từ phần đầu tiên 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 CSS top、bottom、left và right Thuộc tính rất相似, 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 sẽ ảnh hưởng đến vị trí bắt đầu của phần tử trong hướng dòng và inset-inline-start Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng dòng là từ trái qua phải, hướng khối là xuống.

Mô hình

Ví dụ 1

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

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

Thử ngay

Ví dụ 2

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

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

Thử ngay

Ví dụ 3

Khi phần tử <div> có direction Khi giá trị thuộc tính được thiết lập thành rtl, hướng dòng là từ phải qua trái. Mô tả có một lỗi nhỏ, nên là 'Kết quả là phần đầu tiên của phần tử vẫn保持在 bên phải (vì đối với rtl, phần đầu tiên bản thân là bên phải, chỉ là so với bố cục mặc định ltr, toàn bộ nội dung đã lật ngược lại)'.

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

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Bảng số liệu 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

Giáo trình：Định vị CSS

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

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

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