Thuộc tính style padding trong HTML DOM

Thuộc tính style.padding trong HTML DOM trả về và cho phép thay đổi khoảng đệm (padding) của một phần tử trong tài liệu HTML. Đây là thuộc tính shorthand cho paddingTop, paddingRight, paddingBottom, paddingLeft.

Cú pháp

Lấy giá trị padding

object.style.padding

Thay đổi padding

object.style.padding = "value"

Ví dụ

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

<!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 padding 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.padding = "10px 30px";
  }
</script>
</body>
</html>

Kết quả

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