Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

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

Sử dụng thuộc tính marginLeft để đặt hoặc lấy giá trị lề trái của một phần tử. Giá trị có thể là đơn vị độ dài (px, em, rem, %) hoặc auto.

Ví dụ minh họa

Nhấn nút để thêm lề trái 80px cho đoạn văn:

<!DOCTYPE html>
<html>
<body>
  <button type="button" onclick="display()">Thêm lề trái</button>
  <p id="myID">Đây là văn bản demo.</p>
  <script>
    function display() {
      document.getElementById("myID").style.marginLeft = "80px";
    }
  </script>
</body>
</html>

Các giá trị phổ biến

  • 0 – Không lề (mặc định)
  • 10px, 2em, 5% – Độ dài cố định hoặc tương đối
  • auto – Trình duyệt tự tính (thường dùng để căn giữa block: margin-left: auto; margin-right: auto)
  • Giá trị âm: -20px (kéo phần tử ra ngoài)