Thuộc tính style marginBottom trong HTML DOM

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

Cú pháp

Lấy giá trị marginBottom

object.style.marginBottom

Thay đổi marginBottom

object.style.marginBottom = "value"

Ví dụ

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

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

Kết quả

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