CSS - Lề

Các lề tài sản xác định không gian xung quanh một phần tử HTML. Có thể sử dụng các giá trị âm để chồng chéo nội dung.

Các giá trị của thuộc tính margin không được các phần tử con kế thừa. Hãy nhớ rằng các lề dọc liền kề (lề trên và dưới) sẽ thu gọn vào nhau để khoảng cách giữa các khối không phải là tổng của các lề, mà chỉ lớn hơn của hai lề hoặc cùng kích thước với một lề nếu cả hai đều công bằng.

Chúng tôi có các thuộc tính sau để đặt lề phần tử.

Các margin chỉ định một thuộc tính viết tắt để thiết lập các thuộc tính ký quỹ trong một khai báo.
Các margin-bottom chỉ định lề dưới cùng của một phần tử.
Các margin-top chỉ định lề trên cùng của một phần tử.
Các margin-left chỉ định lề trái của một phần tử.
Các margin-right chỉ định lề phải của một phần tử.

Bây giờ, chúng ta sẽ xem cách sử dụng các thuộc tính này với các ví dụ.

Tài sản ký quỹ

Thuộc tính margin cho phép bạn đặt tất cả các thuộc tính cho bốn lề trong một khai báo. Đây là cú pháp để đặt lề xung quanh một đoạn văn:

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính margin-bottom

Thuộc tính margin-bottom cho phép bạn đặt lề dưới cùng của một phần tử. Nó có thể có giá trị theo độ dài,% hoặc tự động.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính đầu ký quỹ

Thuộc tính margin-top cho phép bạn đặt lề trên của một phần tử. Nó có thể có giá trị theo độ dài,% hoặc tự động.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính bên trái

Thuộc tính margin-left cho phép bạn đặt lề trái của một phần tử. Nó có thể có giá trị theo độ dài,% hoặc tự động.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính bên phải ký quỹ

Thuộc tính margin-right cho phép bạn đặt lề phải của một phần tử. Nó có thể có giá trị theo độ dài,% hoặc tự động.

Đây là một ví dụ -

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: