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

Thuộc tính marginBottom (CSS margin-bottom) đặt khoảng cách giữa cạnh dưới của phần tử và phần tử tiếp theo.

Ví dụ minh họa

Nhấn nút để đặt lề dưới 95px cho đoạn văn:

<!DOCTYPE html>
<html>
<body>
  <p id="myID">Đây là văn bản demo.</p>
  <button type="button" onclick="display()">Đặt lề dưới</button>
  <script>
    function display() {
      document.getElementById("myID").style.marginBottom = "95px";
    }
  </script>
</body>
</html>

Lưu ý về Margin Collapsing

Giống margin-top, margin-bottom cũng bị gộp với margin-top của element liền sau nếu cùng block formatting context. Xem chi tiết ở bài marginTop.

Shorthand margin

Đặt 4 lề cùng lúc: margin: top right bottom left (theo chiều kim đồng hồ).

element.style.margin = "10px 20px 30px 40px"; // top=10, right=20, bottom=30, left=40