Thuộc tính padding-inline-start của CSS

Trang trước padding-inline-end
Trang tiếp theo padding-left

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

Của phần tử padding-inline-start Thuộc tính này chỉ về khoảng trống từ viền đến nội dung ở vị trí bắt đầu của hướng in-line.

CSS padding-inline và padding-block Thuộc tính tương ứng với thuộc tính CSS padding-top,padding-bottom,padding-left và padding-right Rất giống nhau, nhưng padding-inline và padding-block Thuộc tính phụ thuộc vào hướng in-line và hướng khối.

Lưu ý:Thuộc tính CSS liên quan writing-mode và direction Định nghĩa hướng in-line. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của phần tử theo hướng in-line, cũng như padding-inline-start Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là từ dưới lên, hướng in-line là từ trái sang phải.

Thực tế

Ví dụ 1

Đặt lề trong hướng in-line ở vị trí bắt đầu:

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

Thử nghiệm trực tiếp

Ví dụ 2

Đặt thuộc tính của phần tử <div> là writing-mode Khi giá trị thuộc tính được đặt là vertical-rl, hướng in-line là từ dưới lên. Kết quả là vị trí bắt đầu của phần tử di chuyển từ bên trái lên trên:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

Thử nghiệm trực tiếp

Ví dụ 3

Đặt thuộc tính của phần tử <div> là direction Khi giá trị thuộc tính được đặt là rtl, hướng in-line là từ phải sang trái. Kết quả là vị trí bắt đầu của phần tử di chuyển từ bên trái sang bên phải:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

Thử nghiệm trực tiếp

Cú pháp CSS

padding-inline-start: auto|value|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
auto	Mặc định. Khoảng cách padding-inline-start mặc định của phần tử.
length	Đặt khoảng cách bằng px, pt, cm, v.v. Không được phép sử dụng giá trị âm. Xem thêm:Đơn vị CSS.
%	Đặt khoảng cách phần trăm so với kích thước của phần tử cha theo hướng in-line.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Kế thừa thuộc tính này từ phần tử 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.paddingInlineStart="100px"