Thuộc tính paddingLeft

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

paddingLeft Cài đặt hoặc trả về khoảng cách bên trái nội bộ của phần tử.

Thuộc tính margin và Thuộc tính padding Tất cả đều thêm khoảng trống xung quanh phần tử. Nhưng khác biệt ở chỗ, margin thêm khoảng trống xung quanh viền, trong khi padding thêm khoảng trống bên trong viền của phần tử.

Xem thêm:

Giáo trình CSS:CSS không gian trong

Tài liệu tham khảo CSS:Thuộc tính padding-left

Tài liệu tham khảo HTML DOM:Thuộc tính padding

Mô hình

Ví dụ 1

Đặt khoảng cách bên trái nội bộ của phần tử <div>:

document.getElementById("myDiv").style.paddingLeft = "50px";

Thử ngay

Ví dụ 2

Đặt lại khoảng cách bên trái nội bộ của phần tử <div> về "normal":

document.getElementById("myDiv").style.paddingLeft = "0px";

Thử ngay

Ví dụ 3

Trả về khoảng cách bên trái nội bộ của phần tử <div>:

alert(document.getElementById("myDiv").style.paddingLeft);

Thử ngay

Ví dụ 4

Khác biệt giữa marginLeft và paddingLeft:

function changeMargin() {
  document.getElementById("myDiv").style.marginLeft = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.paddingLeft = "100px";
}

Thử ngay

Cú pháp

Trả về thuộc tính paddingLeft:

object.style.paddingLeft

Đặt thuộc tính paddingLeft:

object.style.paddingLeft = "%|length|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
% Định nghĩa khoảng cách bên trái nội bộ bằng phần trăm chiều rộng của phần tử cha.
length Định nghĩa khoảng cách bên trái nội bộ bằng đơn vị độ dài.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Thừa kế 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: 0
Giá trị trả về: Chuỗi biểu thị khoảng cách bên trái nội bộ của phần tử.
Phiên bản CSS: CSS1

Trình duyệt hỗ trợ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ