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

Trang trước padding-block
Trang tiếp theo padding-block-start

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

của phần tử padding-block-end là khoảng trống từ cạnh của phần tử đến nội dung ở vị trí kết thúc hướng khối.

CSS padding-block và padding-inline 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-block và padding-inline Thuộc tính phụ thuộc vào hướng khối và hướng ngang.

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ư padding-block Kết quả của thuộc tính. Đối với trang tiếng Anh, hướng khối là theo chiều dọc, hướng ngang là từ trái sang phải.

Mô hình

Ví dụ 1

Đặt lề trong hướng khối ở vị trí kết thúc:

p {
  padding-block-end: 35px;
}

Thử ngay

Ví dụ 2

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

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

Thử ngay

Cú pháp CSS

padding-block-end: auto|value|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
auto	Mặc định. Giá trị mặc định của padding-block-end của phần tử.
length	Đặt padding-block-end bằng đơn vị px, pt, cm, v.v. Không được phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Đặt padding-block-end bằng phần trăm kích thước của phần tử cha theo hướng ngang.
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.paddingBlockEnd="100px"