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

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

inset-block-start Thuộc tính thiết lập khoảng cách từ đầu của phần tử đến phần tử cha trong hướng khối.

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

Thuộc tính của CSS inset-inline và Thuộc tính inset-block Thuộc tính tương ứng với thuộc tính CSS của top,bottom,left và right rất giống nhau, nhưng Thuộc tính 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-start 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

Thiết lập khoảng cách từ đầu của phần tử <div> đã định vị trong hướng khối với phần tử cha:

div {
  inset-block-start: 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à đầu của phần tử dịch chuyển từ trên xuống phải:

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

Thử ngay

Ngữ pháp CSS

inset-block-start: 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

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

Tham khảo:Thuộc tính position CSS

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