Cách đặt padding dưới (paddingBottom) của phần tử bằng JavaScript

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

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

Mẹo: Dùng paddingBottom = "0" để xóa padding dưới. Padding làm tăng kích thước hộp (trừ khi box-sizing: border-box).