Cách đặt padding trái (paddingLeft) của phần tử bằng JavaScript

Để thiết lập khoảng đệm ở cạnh trái của phần tử, bạn dùng thuộc tính paddingLeft. Giá trị chấp nhận độ dài (px, em, rem, %...) và không được âm.

Ví dụ minh họa

Mã sau đặt padding-left = 100px cho hộp 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="setLeftPadding()">Padding trái</button>
  <script>
    function setLeftPadding() {
      document.getElementById("box").style.paddingLeft = "100px";
      /* Nội dung được đẩy sang phải 100px */
    }
  </script>
</body>
</html>

Các thuộc tính padding liên quan

Thuộc tính	Mô tả
`paddingTop`	Padding cạnh trên
`paddingRight`	Padding cạnh phải
`paddingBottom`	Padding cạnh dưới
`paddingLeft`	Padding cạnh trái
`padding`	Shorthand: 1-4 giá trị (TRBL)

Cú pháp padding shorthand (ô nhớ: TRBL - Top Right Bottom Left)

1 giá trị: padding = "10px" — 4 cạnh
2 giá trị: padding = "10px 20px" — trên/dưới 10px, trái/phải 20px
3 giá trị: padding = "10px 20px 30px" — trên 10px, trái/phải 20px, dưới 30px
4 giá trị: padding = "10px 20px 30px 40px" — trên, phải, dưới, trái

Mẹo: 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.