Thuộc tính CSS inset-block

Trang trước inset
Trang tiếp theo inset-block-end

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

inset-block Khoảng cách giữa phần tử cài đặt thuộc tính với phần tử cha theo 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.

inset-block Thuộc tính là tắt ngắn của các thuộc tính sau:

inset-block-start
inset-block-end

inset-block Giá trị của thuộc tính có thể được thiết lập theo nhiều cách khác nhau:

Nếu thuộc tính inset-block có hai giá trị:

inset-block: 10px 50px;

Khoảng cách bắt đầu là 10px
Khoảng cách kết thúc là 50px

Nếu thuộc tính inset-block có một giá trị:

inset-block: 10px;

Khoảng cách bắt đầu và kết thúc đều là 10px

CSS của inset-block và inset-inline Thuộc tính tương ứng với CSS của 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 nội.

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 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 nội là từ trái sang phải.

Mô hình

Ví dụ 1

Thiết lập khoảng cách giữa elemen <div> đã định vị trong hướng khối với elemen cha:

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

Thử ngay

Ví dụ 2

Khi elemen <div> của bạn writing-mode Khi thuộc tính vertical-rl được thiết lập, vị trí bắt đầu của elemen di chuyển từ trên xuống phải, vị trí kết thúc di chuyển từ dưới lên trái:

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

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
auto	Giá trị mặc định. Giá trị mặc định của inset-block của elemen.
length	Định nghĩa khoảng cách bằng px, pt, cm v.v. Cho phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Định nghĩa khoảng cách phần trăm so với elemen cha trên trục tương ứng.
initial	Đặt thuộc tính này thành giá trị mặc định. Xem thêm initial.
inherit	Thực thị từ elemen cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Kế thừa:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS3
Cú pháp JavaScript:	object.style.insetBlock="100px 50px"