Thuộc tính đệm kiểu DOM HTML

Thuộc tính HTML DOM style padding trả về và sửa đổi phần đệm của một phần tử trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

Trả lại đệm

object.style.padding

Đang sửa đổi phần đệm

object.style.padding = “value

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính đệm kiểu DOM HTML -

<!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>DOM Style padding Property Example</h1>
<p>
Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text. Hi! I'm awesome paragraph with some random text.
</p>
<button onclick="add()" class="btn">Add padding</button>
<script>
   function add() {
      document.querySelector('p').style.padding = "10px 30px";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính đệm kiểu DOM HTML

Nhấp vào “ Thêm phần đệm ”Để thêm phần đệm vào phần tử đoạn văn -

Thuộc tính đệm kiểu DOM HTML