Cách thiết lập lề trên (margin-top) của phần tử với JavaScript

Thuộc tính marginTop (CSS margin-top) đặt khoảng cách giữa cạnh trên của phần tử và phần tử trước đó (hoặc container cha).

Ví dụ minh họa

Nhấn nút để thêm lề trên 150px cho hộp có viền:

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID { border: 2px solid #000; padding: 10px; }
  </style>
</head>
<body>
  <div id="myID">Đây là văn bản demo.</div><br>
  <button type="button" onclick="display()">Thêm lề trên</button>
  <script>
    function display() {
      document.getElementById("myID").style.marginTop = "150px";
    }
  </script>
</body>
</html>

Hiện tượng "Margin Collapsing" (Gộp lề)

Lề trên/duôi của các block element liền kề (không có border, padding, clearance) sẽ gộp thành một lề duy nhất = max(margin-bottom trên, margin-top dưới).

• Không gộp nếu: flex/grid container, overflow ≠ visible, float, absolute/fixed position.
• Dùng padding-top: 1px hoặc border-top: 1px solid transparent trên cha để ngăn gộp.