Như hình trên các bạn thấy thuộc tính padding dùng để tạo vùng đệm giữa đường viền và phần nội dung trong các cặp thẻ chẳng hạn như <p></p>, <h1></h1> …
1. Các thuộc tính dùng trong bài
| Thuộc tính (Property) | Mô tả (Description) |
| padding | Thiết lập các thuộc tính đệm trong một khối khai báo (viết rút gọn) |
| padding-top | vùng đệm phía trên |
| padding-right | vùng đệm bên phải |
| padding-bottom | vùng đệm phía dưới |
| padding-left | vùng đệm bên trái |
2. Các giá trị của tất cả thuộc tính đệm
+ length – chẳng hạn như px
+ % – Xác định vùng đệm 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ó
3. Ví dụ
4. Cú pháp tạo vùng đệm rút gọn
Thay vì phải tạo vùng đệm bởi bốn thuộc tính (padding-top, padding-right, padding-bottom, padding-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:
+ padding: 25px 50px 75px 100px
Trong đó
Vùng đệm phía trên là 25px
Vùng đệm bên phải là 50px
Vùng đệm phía dưới là 75px
Vùng đệm bên trái là 100px
+ padding: 25px 50px 75px;
Trong đó
Vùng đệm phía trên là 25px
Vùng đệm bên phải và trái là 50px
Vùng đệm phía dưới là 75px
+ padding: 25px 50px;
Trong đó
Vùng đệm phía trên và dưới là 25px
Vùng đệm bên phải và trái là 50px
+ padding: 25px;
Cả 04 vùng đệm đều có cùng một giá trị là 25px
5. Các bài tập
5.1 Bài tập 1
Tạo vùng đệm phía trên của thẻ <p> là 30px
<!DOCTYPE html>
<html>
<head>
<style>
p {
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>
p {
background-color: lightblue;
padding-top: 30px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
5.2 Bài tập 2
Cũng như bài tập 1 nhưng tạo vùng đệm tại 04 hướng của thẻ <p> đều là 50px
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightblue;
padding: 50px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
5.3 Bài tập 3
Cũng như bài tập 1 nhưng tạo vùng đệm của thẻ <p> như sau: vùng đệm phía trên và dưới là 25px, còn vùng đệm bên phải và trái là 50px.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: lightblue;
padding: 25px 50px;
}
</style>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>
</body>
</html>
6. Lời cuối bài
Đến đây chắc các bạn đã biết cách tạo vùng đệm trong CSS. Ở bài sau tôi sẽ viết về cách thiết lập chiều rộng và chiều cao cho phần tử.
The post [CSS bài 10] Tạo vùng đệm bằng thuộc tính padding appeared first on Học online.
from WordPress http://ift.tt/2eNidiq
via IFTTT
Không có nhận xét nào:
Đăng nhận xét