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

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

inset-block-end Thuộc tính thiết lập khoảng cách cuối cùng của phần tử trong hướng khối 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 của CSS.

CSS của inset-inline và inset-block Thuộc tính tương ứng với top,bottom,left và right Thuộc tính rất相似, nhưng inset-block và inset-inline Thuộc tính 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 Định nghĩa hướng khối. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của khối, cũng như inset-block-end Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là xuống, hướng dòng là từ trái sang phải.

Mô hình

Ví dụ 1

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

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

Thử ngay

Ví dụ 2

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

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

Thử ngay

Ngữ pháp CSS

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

Giá trị thuộc tính

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

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 writing-mode CSS