Thuộc tính padding của Style

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

padding Thuộc tính này thiết lập hoặc trả về khoảng cách trong của phần tử.

Thuộc tính này có thể sử dụng một đến bốn giá trị:

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

  • Một giá trị, ví dụ: div {padding: 50px} - Tất cả bốn cạnh sẽ có khoảng cách trong 50px
  • Hai giá trị, ví dụ: div {padding: 50px 10px} - Khoảng cách trong và ngoài theo chiều dọc sẽ là 50px, khoảng cách trong và ngoài theo chiều ngang sẽ là 10px
  • Ba giá trị, ví dụ: div {padding: 50px 10px 20px} - khoảng cách trong trên cùng là 50px, khoảng cách trong phải và trái là 10px, khoảng cách trong dưới là 20px
  • Bốn giá trị, ví dụ: div {padding: 50px 10px 20px 30px} - khoảng cách trong trên cùng là 50px, khoảng cách trong phải là 10px, khoảng cách trong dưới là 20px, khoảng cách trong trái là 30px

Xem thêm:

Hướng dẫn CSS:Khoảng trống trong CSS

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

Mô hình

Ví dụ 1

Đặt khoảng cách trong của phần tử <div>:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Thử ngay

Ví dụ 2

Thay đổi khoảng cách trong của tất cả bốn cạnh của phần tử <div> thành "25px":

document.getElementById("myDiv").style.padding = "25px";

Thử ngay

Ví dụ 3

Trả về khoảng cách trong của phần tử <div>:

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

Thử ngay

Ví dụ 4

Sự khác biệt giữa thuộc tính margin và padding:

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

Thử ngay

Cú pháp

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

object.style.padding

Đặt thuộc tính padding:

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

Giá trị thuộc tính

Giá trị Mô tả
% Định nghĩa khoảng cách trong bằng phần trăm chiều rộng của phần tử cha.
length Định nghĩa khoảng cách trong 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 Thay đổi thuộc tính này từ giá trị của 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 trong 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ợ