Thuộc tính CSS inline-size

Trang trước initial-letter
Trang tiếp theo inset

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

inline-size Thuộc tính xác định kích thước của phần tử theo hướng nội bộ.

Lưu ý:Thuộc tính CSS liên quan writing-mode Định nghĩa hướng nội bộ, điều này sẽ ảnh hưởng đến inline-size Kết quả. Đối với trang tiếng Anh, hướng nội bộ từ trái sang phải, hướng khối là xuống.

Thuộc tính của CSS inline-size và block-size Thuộc tính tương ứng với CSS của width và height Thuộc tính rất tương tự, nhưng inline-size và block-size Thuộc tính này phụ thuộc vào hướng nội bộ và hướng khối.

Thực hành

Ví dụ 1

Đặt kích thước của phần tử <div> theo hướng nội bộ:

div {
  inline-size: 200px;
}

Thử ngay

Ví dụ 2

Khi phần tử <div> có writing-mode Giá trị thuộc tính được đặt là vertical-rl khi, hướng nội bộ từ ngang sang dọc xuống, điều này sẽ ảnh hưởng đến inline-size Cách hoạt động của thuộc tính:

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

Thử ngay

Cú pháp CSS

inline-size: 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 inline-size của phần tử.
length	Đặt kích thước theo hướng nội bộ, đơn vị là px, pt, cm, v.v. Cho phép sử dụng giá trị âm. Xem thêm:Đơn vị CSS.
%	Đặt kích thước theo phần trăm so với kích thước của phần tử 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	Thay đổi thuộc tính này thành giá trị mặc định của nó. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Di truyền:	Không
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.inlineSize="250px"