Thuộc tính style marginTop trong HTML DOM

Thuộc tính style.marginTop trong HTML DOM trả về và cho phép thay đổi lề trên (top margin) của một phần tử trong tài liệu HTML.

Cú pháp

Lấy giá trị marginTop

object.style.marginTop

Thay đổi marginTop

object.style.marginTop = "value"

Ví dụ

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

<!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 marginTop 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.marginTop = "50px";
  }
</script>
</body>
</html>

Kết quả

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