Lề kiểu DOM HTML

Thuộc tính DOM style marginBottom trả về và sửa đổi lề dưới cùng của một phần tử trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

Lợi nhuận hoàn lại Dưới đáy

object.style.marginBottom

Sửa đổi marginBottom

object.style.marginBottom = “value”

Ví dụ

Hãy để chúng tôi xem một ví dụ về 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>DOM Style marginBottom Property Example</h1>
<p>
   Hi! I'm awesome paragraph with some random text.
   Hi! I'm awesome paragraph with some random text.
   Hi! I'm awesome paragraph with some random text.
   Hi! I'm awesome paragraph with some random text.
</p>
<button onclick="add()" class="btn">Add margin</button>
<script>
   function add() {
      document.querySelector('p').style.marginBottom = "50px";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Lề kiểu DOM HTML

Nhấp vào “ Thêm ký quỹ ”Để thêm lề dưới vào phần tử đoạn văn.

Lề kiểu DOM HTML