bảng lịch học

Sách tham khảo CSS

CSS 属性

Khóa học tự chọn

Khuyến nghị khóa học:

Hộp công cụ CodeW3C.com

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

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

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

Của phần tử và Chỉ là khoảng trống từ viền đến nội dung theo hướng nội bộ của phần tử. Nó là thuộc tính viết tắt của các thuộc tính sau:

và Giá trị của thuộc tính có thể được thiết lập bằng nhiều cách:

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

padding-inline: 10px 50px;

Khoảng cách nội bộ của đầu bắt đầu là 10px
Khoảng cách nội bộ của đầu cuối là 50px

如果 padding-inline 属性有一个值：

padding-inline: 10px;

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

padding-inline: 10px; và Lưu ý: padding-right Khoảng cách nội bộ đầu và cuối của phần tử đều là 10px CSSThuộc tính này tương tự như thuộc tính CSSpadding-bottomThuộc tính này tương tự như thuộc tính CSSpadding-top Lưu ý: , padding-left và Lưu ý: padding-right Rất相似, nhưng

padding-blockThuộc tính phụ thuộc vào hướng nội và hướng khối. padding-inline: 50px; Lưu ý: direction thuộc tính CSS liên quan và Định nghĩa hướng nội. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của phần tử trong hướng nội, cũng như

padding-inline

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

Mô hình

div {
  Ví dụ 1
}

Thử nghiệm trực tiếp

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

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

Thử nghiệm trực tiếp

Ví dụ 3

Khi thuộc tính writing-mode của phần tử <div> được thiết lập thành vertical-rl, hướng nội là từ dưới lên. Kết quả là phần đầu của phần tử di chuyển từ bên trái sang trên cùng, phần cuối di chuyển từ bên phải sang dưới cùng: direction Khi giá trị thuộc tính của thuộc tính direction được thiết lập thành rtl, hướng nội là từ phải sang trái. Kết quả là phần đầu của phần tử di chuyển từ bên trái sang bên phải, phần cuối di chuyển từ bên phải sang bên trái:

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

Thử nghiệm trực tiếp

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị	Mô tả
auto	Mặc định. Khoảng cách padding-inline mặc định của phần tử.
length	Định nghĩa khoảng cách bằng đơn vị px, pt, cm, v.v. Không được phép có giá trị âm. Xem thêm:Đơn vị CSS.
%	Định nghĩa khoảng cách bằng phần trăm kích thước hướng nội của phần tử cha.
initial	Đặt tính chất này về giá trị mặc định. Xem thêm initial.
inherit	Tiếp nhận tính chất này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	auto
Di truyền:	Không
Chế tạo animation:	Hỗ trợ. Xem thêm:Tính chất liên quan đến animation.
Phiên bản:	CSS3
Ngôn ngữ lập trình JavaScript:	object.style.paddingInline="100px 20px"