Thuộc tính padding-block CSS

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

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

thành phần padding-block Là khoảng cách từ viền đến nội dung theo hướng khối, nó là viết tắt của các thuộc tính sau:

padding-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 padding-block có hai giá trị:

padding-block: 10px 50px;

Khoảng cách trong đầu là 10px
Khoảng cách trong cuối là 50px

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

padding-block: 10px;

Khoảng cách trong đầu và cuối của khối đều là 10px

CSS padding-block và padding-inline Thuộc tính và 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 hàng ngang.

Lưu ý:Các 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à xuống, hướng hàng ngang là từ trái sang phải.

Mô hình

Ví dụ 1

Đặt khoảng cách trong hướng khối hai bên:

p {
  padding-block: 35px;
}

Thử ngay

Ví dụ 2

Khi phần tử <div> có writing-mode Khi giá trị thuộc tính writing-mode được đặt là vertical-rl, vị trí bắt đầu của phần tử 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 {
  writing-mode: vertical-rl;
  padding-block: 10px 50px;
}

Thử ngay

Ngôn ngữ CSS

padding-block: auto|value|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 padding-block của phần tử.
length	Đặt padding-block bằng px, pt, cm v.v. Không được phép giá trị âm. Xem thêm:Đơn vị CSS.
%	Đặt padding-block bằng phần trăm kích thước của phần tử cha theo hướng hàng ngang.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Gia đình thuộc tính này từ phần tử cha của nó. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Kế thừa:	Không
Chế tạo hoạt hình:	Hỗ trợ. Xem thêm:Các thuộc tính liên quan đến hoạt hình.
Phiên bản:	CSS3
Ngôn ngữ lập trình JavaScript:	object.style.paddingBlock="100px 50px"