Ngôn ngữ CSS - CSS Margin
CSS Margin – Căn lề trong CSS
Trong CSS, Thuộc tính margin được sử dụng để tạo ra khoảng không gian trống (space) xung quanh các phần tử.
Thuộc tính này thiết lập khoảng trống BÊN NGOÀI đường viền (border).
Giá trị của thuộc tính margin không được kế thừa bởi các phần tử con. Bạn có quyền kiểm soát tất cả các lề (trên, dưới, trái và phải) thông qua các thuộc tính mà bạn sẽ được tìm hiểu ngay phía dưới của bài học.
Cú pháp:
tagName {
margin: giá trị;
}
Thuộc tính Margin CSS
| Thuộc tính | Ví dụ | Mô tả |
|---|---|---|
| margin | margin: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... |
| margin-top | margin-top: 5px; | Canh lề bên trên cho thành phần, đơn vị có thể là px, em, %, ... |
| margin-right | margin-right: 5px; | Canh lề bên phải cho thành phần, đơn vị có thể là px, em, %, ... |
| margin-bottom | margin-bottom: 5px; | Canh lề bên dưới cho thành phần, đơn vị có thể là px, em, %, ... |
| margin-left | margin-left: 5px; | Canh lề bên trái cho thành phần, đơn vị có thể là px, em, %, ... |
Tất cả các thuộc tính liên quan tới margin đều có thể nhận các giá trị sau:
| Giá trị | Mô tả |
|---|---|
| auto | Các trình duyệt sẽ tự động ước lượng việc căn lề cho mỗi phần tử. |
| length | Xác định độ rộng của lề (theo đơn vị px, pt, cm, …). Giá trị mặc định là 0. |
| % | % – Xác định mối quan hệ giữa lề với độ rộng của phần tử chứa nó. |
| inherit | Kế thừa giá trị lề từ phần tử cha chứa phần tử có thuộc tính margin này. |
Ví dụ: dưới đây sẽ hướng dẫn các bạn cách áp dụng 4 thuộc tính margin như trình bày ở trên để tạo lề cho phần tử <p>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>Đoạn văn bản này không sử dụng thuộc tính margin. </p>
<p class="ex">Đoạn văn bản này canh lề trên 50px, dưới 50px, phải 100px, trái 100px.</p>
</body>
</html>
Thuộc tính Margin trong CSS
Khi sử dụng thuộc tính margin, bạn có thể đơn giản hơn đoạn code của mình nhưng nó vẫn giúp bạn xác định tất cả các thuộc tính liên quan tới việc căn lề trong CSS như:
- margin-top
- margin-right
- margin-bottom
- margin-left
Ví dụ:
<html>
<body>
<style>
p {
margin: 100px 150px 100px 80px;
}
</style>
<h2>Sử dụng thuộc tính margin</h2>
<div>Phần tử này có lề trên 100px, lề phải 150px, lề dưới 100px và lề trái 80px.</div>
</body>
</html>
Margin: Thuộc tính viết tắt
Thuộc tính Margin được sử dụng để rút ngắn mã.
Có bốn loại để xác định thuộc tính lề. Bạn có thể sử dụng một trong số đó.
- margin: 50px 100px 150px 200px;
- margin: 50px 100px 150px;
- margin: 50px 100px;
- margin 50px;
1) margin: 50px 100px 150px 200px;
Có nghĩa là:
- Lề trên là 50px
- Lề phải là 100px
- Lề dưới là 150px
- Lề trái là 200px
Ví dụ:
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>Đoạn văn bản này không sử dụng thuộc tính margin. </p>
<p class="ex">Đoạn văn bản này canh lề trên 50px, phải 100px, dưới 150px, trái 200px.</p>
</body>
</html>
2. margin: 50px 100px 150px;
Có nghĩa là:
- Lề trên là 50px
- Lề trái và phải là 100px
- Lề dưới là 150px
Ví dụ:
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>Đoạn văn bản này không sử dụng thuộc tính margin. </p>
<p class="ex">Đoạn văn bản này canh lề trên 50px, phải 100px, dưới 150px, trái 100px.</p>
</body>
</html>
3. margin: 50px 100px;
Có nghĩa là:
- Lề trên và lề dưới là 50px
- Lề trái và phải là 100px
Ví dụ:
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px;
}
</style>
</head>
<body>
<p>Đoạn văn bản này không sử dụng thuộc tính margin. </p>
<p class="ex">Đoạn văn bản này canh lề trên 50px, phải 100px, dưới 50px, trái 100px.</p>
</body>
</html>
Xem ví dụ
4. margin: 50px;
Có nghĩa là:
- Lề trên, lề phải, lề dưới, lề trái có giá trị là 50px
Ví dụ:
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px;
}
</style>
</head>
<body>
<p>Đoạn văn bản này không sử dụng thuộc tính margin. </p>
<p class="ex">Đoạn văn bản này canh lề trên 50px, phải 100px, dưới 50px, trái 100px.</p>
</body>
</html>
