Canh lề trong CSS

Lề được sử dụng để tạo không gian xung quanh các phần tử, phần bên ngoài bất kỳ đường viền xác định nào.

Thuộc tính margin CSS được sử dụng để tạo không gian xung quanh các phần tử, phần bên ngoài bất kỳ đường viền xác định nào. Với CSS, bạn có toàn quyền kiểm soát các lề. Có các thuộc tính để đặt lề cho mỗi bên của một phần tử bao gồm trên cùng, bên phải, dưới cùng và bên trái.

Canh lề riêng lẻ

CSS có các thuộc tính để chỉ định lề cho mỗi bên của phần tử:

• margin-top
• margin-right
• margin-bottom
• margin-left

Tất cả các thuộc tính lề có thể có các giá trị sau:

• auto:  Trình duyệt tự tính toán lề.
• length: Chỉ định lề bằng px, pt, cm…
• %:  Chỉ định lề tính bằng% chiều rộng của phần tử chứa.
• inherit:  Chỉ định rằng lề phải được kế thừa từ phần tử mẹ.

Ví dụ:

Đặt lề khác nhau cho cả 4 cạnh của phần tử <p>

<p style="margin: 70px; padding: 5px; border: 2px dotted #693dee;  margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;">Phần tử này có lề nhiều giá trị khác nhau.</p

Kết quả hiển thị trên trình duyệt:

Phần tử này có lề nhiều giá trị khác nhau.

Canh lề theo kiểu viết tắt

Để rút ngắn mã, có thể chỉ định tất cả các giá trị thuộc tính ngắn họn trong một thuộc tính margin. Ví dụ margin: top right bottom left bao gồm các giá trị sau:

• margin-top
• margin-right
• margin-bottom
• margin-left

Đây là cách nó hoạt động

Nếu thuộc tính margin có 4 giá trị ví dụ: margin: 25px 50px 75px 100px; thì có các lề như sau:

• margin-top:25px;
• margin-right:50px;
• margin-bottom:75px;
• margin-left:100px;

Nếu thuộc tính margin có 3 giá trị ví dụ: margin: 25px 50px 75px; thì có các lề như sau:

• margin-top:25px;
• margin-right:50px;
• margin-bottom:75px;

Nếu thuộc tính margin có 2 giá trị ví dụ: margin: 25px 50px; thì có các lề như sau:

• margin-top:25px;
• margin-right:50px;

Nếu thuộc tính margin có 1 giá trị ví dụ: margin: 25px; thì có các lề như sau:

Canh lề với giá trị tự động

Bạn có thể đặt thuộc tính margin thành căn giữa auto theo chiều ngang của phần tử bên trong vùng chứa của nó. Khi đó, phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa lề trái và lề phải.

Ví dụ:

<p style="width: 300px; margin: auto; padding: 5px; border: 2px dashed #00ff00;">Phần tử này có lề tự động.</p>

Kết quả hiển thị trên trình duyệt:

Phần tử này có lề tự động.

Canh lề với giá trị kế thừa

Ví dụ này cho phép lề trái của phần tử <p class="vidu1"> được kế thừa từ phần tử mẹ <div>:
Ví dụ:

<div style="width: 300px; margin-right: 150px; padding: 5px; border: 2px dashed red;">
Phần tử mẹ.
<p style="margin-right: inherit; border: 1px solid #000;">Phần tử con.</p>
</div>

Kết quả hiển thị trên trình duyệt:

Thu gọn lề trong CSS

Đôi khi 2 lề thu gọn lại thành một lề duy nhất. Lề trên và dưới của các phần tử đôi khi được thu gọn thành một lề duy nhất bằng lề lớn nhất trong 2 lề. Điều này không xảy ra ở lề trái và lề phải! Chỉ lề trên và dưới! Hãy xem ví dụ sau:

Ví dụ:

Theo quy tắc: trên phải dưới trái thì phần tử <div> có lề dưới 50px, phần tử dười là <p> có lề trên 20px. Thì lề lớn nhất trong 2 lề là lề dưới 50px của phần tử <div>.

<div style="width: 300px; margin: 0 0 50px 0; padding: 5px; border: 2px dashed red;">
Phần tử mẹ.
</div>
<p style="margin: 20px 0 0 0; border: 1px solid #000;">Phần tử con.</p>

Phần tử con.

Trong ví dụ trên, phần tử <div> có lề dưới là 50px và phần tử <p> có lề trên được đặt thành 20px. Theo lẽ thường, dường như lề dọc giữa <div> và <p> sẽ là tổng cộng 70px. Nhưng do sự chu gọn của margin, margin thực tế cuối cùng là 50px.

Ví dụ:

Theo quy tắc: trên phải dưới trái thì phần tử <div> có lề dưới 50px, phần tử dười là <p> có lề trên 20px. Thì lề lớn nhất trong 2 lề là lề dưới 50px của phần tử <div>. Còn lề phải của <div> là 20px, lề phải của <p> là 80px, độc lập với nhau, không bị thu gọn theo giá trị của 1 phần tử nào.

<div style="margin: 0 20px 50px 0; padding: 5px; border: 2px dashed red;">
Phần tử mẹ.
</div>
<p style="margin: 20px 80px 0 0; border: 1px solid #000;">Phần tử con.</p>

Kết quả hiển thị trên trình duyệt:

Phần tử con.

Tất cả các thuộc tính lề CSS

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---