Thuộc tính style margin trong HTML DOM

Thuộc tính style.margin trong HTML DOM trả về và cho phép thay đổi lề (margin) của một phần tử trong tài liệu HTML. Đây là thuộc tính shorthand cho marginTop, marginRight, marginBottom, marginLeft.

Cú pháp

Lấy giá trị margin

object.style.margin

Thay đổi margin

object.style.margin = "value"

Ví dụ

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

<!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 margin 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 margin</button>
<script>
  function add() {
    document.querySelector('p').style.margin = "20px 30px";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thêm margin để thêm lề cho phần tử đoạn văn.