Ở bài viết này tôi sẽ viết về cách căn lề cho phần tử bằng thuộc tính margin
1. Các thuộc tính dùng trong bài
| Thuộc tính (Property) | Mô tả (Description) |
| margin | Thiết lập các thuộc tính lề trong một khối khai báo (cách viết rút gọn) |
| margin-top | Căn lề phía trên |
| margin-right | Căn lề bên phải |
| margin-bottom | Căn lề phía dưới |
| margin-left | Căn lề bên trái |
2. Các giá trị của tất cả thuộc tính lề
+ auto – trình duyệt tự động thiết lập giá trị
+ length – chẳng hạn như px
+ % – Xác định lề trong% chiều rộng của phần tử chứa nó
+ inherit – kế thừa giá trị của phần tử chứa nó
Lưu ý: Cho phép các giá trị âm.
3. Ví dụ
4. Cú pháp căn lề rút gọn
Thay vì phải căn lề bởi bốn thuộc tính (margin-top, margin-right, margin-bottom, margin-left) riêng biệt, thì ta có thể hợp chúng lại thành một. Với cách này, để các bạn dễ hiểu tôi sẽ có các ví dụ sau:
+ margin: 25px 50px 75px 100px
Trong đó
Lề trên là 25px
Lề phải là 50px
Lề dưới là 75px
Lề trái là 100px
+ margin: 25px 50px 75px;
Trong đó
Lề trên là 25px
Lề phải và trái là 50px
Lề dưới là 75px
+ margin: 25px 50px;
Trong đó
Lề trên và dưới là 25px
Lề phải và trái là 50px
+ margin: 25px;
Cả 04 lề đều có cùng một giá trị là 25px
5. Giá trị auto
6. Giá trị inherit
Ví dụ dưới các bạn sẽ thấy lề trái được kế thừa từ phần tử chứa nó
7. Lưu ý
Nếu có hai phần tử sử dụng hai giá trị lề trên và lề dưới khác nhau thì lề dưới của phần tử này và lề trên của phần tử kia sẽ được lấy giá trị lớn nhất. Điều này sẽ không xảy ra ở lề trái và lề phải.
Để các bạn dễ hiểu tôi sẽ làm ví dụ dưới đây
Trong ví dụ dưới, phần tử <h1> có lề dưới 50px. Phần tử <h2> có lề trên được đặt là 20px.
Theo bình thường thì ta cộng khoảng cách dọc giữa <h1> và <h2> sẽ là tổng cộng 70px (50px + 20px). Nhưng thực tế thì nó chỉ lấy giá trị lớn nhất là 50px.
Như hình trên bạn thấy nó lấy giá lớn nhất là 50px chứ KHÔNG PHẢI LÀ 70px.
8. Các bài tập
8.1 Bài tập 1
Thiết lập lề trái của thẻ <h1> là 20px
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
</body>
</html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightblue;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
</body>
</html>
8.2 Bài tập 2
Cũng như bài tập 1 nhưng căn tất cả các lề của thẻ <h1> là 25px
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightblue;
margin: 25px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
</body>
</html>
8.3 Bài tập 3
Cũng như bài tập 1 nhưng dùng thuộc tính margin để thiết lập thẻ <h1> có lề trên và dưới là 50px, lề trái và phải là 25px
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightblue;
margin: 50px 25px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
</body>
</html>
8.4 Bài tập 4
Dùng thuộc tính margin để căn giữa nội dung nằm trong thẻ <h1>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightblue;
width: 300px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
</body>
</html>
Câu trả lời của bài tập 4
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightblue;
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn.</p>
</body>
</html>
9. Lời cuối bài
Đến đây chắc các bạn đã biết cách căn lề cho các phần tử của các thẻ như <h1>, <p> … Ở bài sau tôi sẽ viết về tạo vùng đệm bằng thuộc tính padding
The post [CSS bài 9] Căn lề cho phần tử bằng thuộc tính margin appeared first on Học online.
from WordPress http://ift.tt/2wZgcdW
via IFTTT
Không có nhận xét nào:
Đăng nhận xét