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

Để thiết lập khoảng đệm ở cạnh trên của phần tử, bạn dùng thuộc tính paddingTop. 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-top = 20px 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="setTopPadding()">Padding trên</button>
  <script>
    function setTopPadding() {
      document.getElementById("box").style.paddingTop = "20px";
      /* Nội dung được đẩy xuống dưới 20px */
    }
  </script>
</body>
</html>

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

Cú pháp padding shorthand

• 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 (kim đồng hồ)

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.