Thuộc tính style paddingBottom trong HTML DOM

Thuộc tính style.paddingBottom trong HTML DOM trả về và cho phép thay đổi khoảng đệm bên dưới (bottom padding) của một phần tử trong tài liệu HTML.

Cú pháp

Lấy giá trị paddingBottom

object.style.paddingBottom

Thay đổi paddingBottom

object.style.paddingBottom = "value"

Ví dụ

Ví dụ sử dụng thuộc tính style.paddingBottom:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style paddingBottom DOM</h1>
<p>Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. Chào! Tôi là một đoạn văn tuyệt vời với một số văn bản ngẫu nhiên. </p>
<button onclick="add()" class="btn">Thêm padding</button>
<script>
  function add() {
    document.querySelector('p').style.paddingBottom = "30px";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thêm padding để thêm khoảng đệm bên dưới cho phần tử đoạn văn.