Tidadigi Logo

CSS margin-left Property

Thuộc tính margin-left trong CSS được dùng để đặt độ rộng lề trái cho phần tử. Giá trị âm của thuộc tính này được cho phép.

  • Giá trị dương được dùng khi muốn lề cách xa các phần tử lân cận.
  • Giá trị âm được dùng khi muốn lề được đặt gần hơn.

Cú pháp:

margin-left: length|auto|initial|inherit;

Giá trị mặc định: Giá trị mặc định của nó là 0.

Giá trị thuộc tính:

  • length: Đặt một giá trị cố định được định nghĩa bằng px, cm, pt. Các giá trị âm vẫn được chấp nhận. Giá trị mặc định là 0 px.
margin-left: 15px;

Ví dụ 1: 

html 
<html>
   <head>
      <title>
         CSS | margin-left Property
      </title>
   </head>
   
   <body>
      <p style = "margin-left:15px; border-style:solid ; 
                  border-color:black;">
         This paragraph has 15px margin .
      </p>
   </body>
</html>

Ví dụ 2: 

html 
<html>
   <head>
      <title>
         CSS | margin-left Property
      </title>
   </head>
   
   <body>
      <p style = "margin-left:20%; border-style:solid ; 
                  border-color:black;">
         This paragraph has 20% margin .
      </p>
   </body>
</html>
  • auto :Nó được dùng khi bạn muốn trình duyệt xác định độ rộng lề trái.
margin-left: auto;

Ví dụ: 

html 
<html>
   <head>
      <title>
         CSS | margin-left Property
      </title>
   </head>
   
   <body>
      <p style = "margin-left:auto; border-style:solid ; 
                  border-color:black;">
         This paragraph has auto margin .
      </p>
   </body>
</html>
  • initial :Nó được dùng để đặt giá trị thuộc tính margin-left về mặc định.
margin-left: initial;

Ví dụ: 

html 
<html>
   <head>
      <title>
         CSS | margin-left Property
      </title>
   </head>
   
   <body>
      <p style = "margin-left:initial; border-style:solid ; 
                  border-color:black;">
         This paragraph has initial margin .
      </p>
   </body>
</html>
  • inherit :Nó được dùng khi bạn muốn phần tử kế thừa thuộc tính margin-left từ phần tử cha.
margin-left: inherit;

Ví dụ 1: 

html 
<html>
   <head>
      <title>
         CSS | margin-left Property
      </title>
   </head>
   
   <body>
      <div style="margin-left:50px;">
      <p style = "margin-left:inherit; border-style:solid ; 
                  border-color:black;">
         This paragraph has auto margin .
      </p>
      </div>
   </body>
</html>

Ví dụ 2: 

html 
<html>
   <head>
      <title>
         CSS | margin-left Property
      </title>
   </head>
   
   <body>
      <p style = "margin-left:auto; border-style:solid ; 
                  border-color:black;">
         This paragraph has auto margin .
      </p>
      
      <p style = "margin-left:10px; border-style:solid ; 
                  border-color:black;">
         This paragraph has 10px margin.
      </p>
      <br>
      
      <p style = "margin-left:5%;border-style:solid; 
                  border-color: black;">
         This paragraph has 5% margin.
      </p>
      <br>
      
      <p style = "margin-left:15px; border-style:solid;
                  border-color: black;">
         This text has an margin of 15px.
      </p>
      <br><br>   

      <p style = "margin-left:initial;border-style:solid;
                  border-color: black;">
         This text has a margin of default
         typeset by initial
      </p>   
   </body>
</html>

Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ margin-left Property được liệt kê dưới đây:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 3.0
  • Opera 3.5
  • Firefox 1.0
  • Safari 1.0

Last Updated : 21/07/2025