Thuộc tính style.paddingRight trong HTML DOM

Thuộc tính style.paddingRight trong HTML DOM dùng để lấy hoặc đặt padding bên phải của một phần tử.

Cú pháp

Lấy giá trị:

object.style.paddingRight

Đặt giá trị:

object.style.paddingRight = "giá_trị"

Các loại giá trị:

Giá trị	Mô tả
`length`	Độ dài cụ thể (px, em, rem, cm...). VD: `20px`
`%`	Phần trăm chiều rộng phần tử cha. VD: `10%`
`initial`	Trả về giá trị mặc định
`inherit`	Kế thừa từ phần tử cha

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
  .outer-box { background-color: #db133a; width: 300px; height: 300px; margin: 1rem auto; }
  .inner-box { background-color: #C3C3E6; width: 100%; height: 150px; }
</style>
</head>
<body>
<h1>Demo style.paddingRight</h1>
<div class="outer-box">
  <div class="inner-box"></div>
</div>
<button type="button" onclick="addPadding()">Thêm padding-right</button>
<script>
  function addPadding() {
    var outerBox = document.querySelector('.outer-box');
    outerBox.style.paddingRight = '20px';
  }
</script>
</body>
</html>

Kết quả

Nhấn "Thêm padding-right" → hộp đỏ có khoảng trống 20px bên trong cạnh phải, hộp xám co lại.

Tương tự: paddingLeft, paddingTop, paddingBottom, padding (shorthand).