Cách đặt padding của phần tử bằng JavaScript

Để thiết lập khoảng đệm (padding) cho phần tử, bạn dùng thuộc tính shorthand padding**. Nó chấp nhận 1 đến 4 giá trị theo thứ tự TRBL (Top, Right, Bottom, Left) — theo chiều kim đồng hồ.

Ví dụ minh họa

Mã sau đặt padding khác nhau cho 4 cạnh khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 2px solid #FF0000;
      width: 150px;
      height: 70px;
      background: #f9f9f9;
    }
  </style>
</head>
<body>
  <div id="box">Đây là văn bản demo.</div>
  <br><br>
  <button type="button" onclick="addPadding()">Thêm Padding</button>
  <script>
    function addPadding() {
      document.getElementById("box").style.padding = "20px 30px 10px 50px";
      /* Trên 20px, Phải 30px, Dưới 10px, Trái 50px */
    }
  </script>
</body>
</html>

Cú pháp padding (1-4 giá trị)

Số giá trị	Cú pháp	Ý nghĩa
1	`"10px"`	4 cạnh = 10px
2	`"10px 20px"`	Trên/Dưới = 10px, Trái/Phải = 20px
3	`"10px 20px 30px"`	Trên = 10px, Trái/Phải = 20px, Dưới = 30px
4	`"10px 20px 30px 40px"`	Trên, Phải, Dưới, Trái (kim đồng hồ)

Thuộc tính con riêng lẻ

paddingTop
paddingRight
paddingBottom
paddingLeft

Lưu ý:

Padding không chấp nhận giá trị âm.
Padding làm tăng kích thước hộp (trừ khi box-sizing: border-box).
Dùng % tính theo width của containing block (cả top/bottom).
padding không ảnh hưởng đến margin hay border.