Cơ sở dữ liệu - Bài 9: CSS Padding

Nội dung text: Cơ sở dữ liệu - Bài 9: CSS Padding

1. Bài 9: CSS Padding BỞI NGUYEN HUYEN
2. • CSS Padding • CSS padding có các thuộc tính được sử dụng để tạo ra khoảng trống xung quanh nội dung. • Padding dành một vùng trống xung quanh nội dung (bên trong đường viền) của một phần tử (thẻ). • Với CSS, bạn có toàn quyền điều khiển padding như mong muốn. Các thuộc tính của CSS cho phép đặt padding cho từng bên của một phần tử (bên trên, bên phải, bên dưới, bên trái).
3. • Padding cho từng cạnh • CSS Padding có các thuộc tính sau: • padding-top • padding-right • padding-bottom • padding-left • Tất cả các thuộc tính có thể có các giá trị sau: • độ dài – tạo một padding theo đơn vị px, pt, cm, etc. • % – tạo một padding theo % theo độ rộng của phần tử chứa nó. • Thừa kế – tạo padding được thừa kế từ phần tử cha.
4. • Ví dụ sau dùng cả bốn thuộc tính của CSS Padding : • Ví dụ 1: • p { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }
5. • HTML: Sử dụng các thộc tính Padding riêng lẻ Phần tử dive có padding-top là 50px, padding-right là 30px, padding-bottom là 50px, và padding-left là 80px.
6. CSS: div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }
7. • Padding – Cách viết ngắn • Code rút gọn, chúng ta có thể ghi rõ tất cả các thuộc tính trong một thuộc tính. • Thuộc tính của padding là thuộc tính viết tắt cho thuộc tính cá nhân sau đây: • padding-top • padding-right • padding-bottom • padding-left
8. • Ví dụ 2: • p { padding: 50px 30px 50px 80px; }
9. HTML: Sử dụng các thộc tính Padding rút gọn Phần tử div có padding-top là 50px, padding-right là 30px, padding-bottom là 50px, và padding-left là 80px.
10. • CSS: div { border: 1px solid black; background-color: lightblue; padding: 50px 30px 50px 80px; }
11. • Cách hoạt động của nó: Thuộc tính của padding có bốn giá trị: • padding: 25px 50px 75px 100px tương ứng với: – padding-top là 25px – padding-right là 50px – padding-bottom là 75px – padding-left là 100px
12. • Nếu thuộc tính của padding có ba giá trị: • padding: 25px 50px 75px tương ứng với: – padding-top là 25px – padding-right và padding-left là 50px – padding-bottom là 75px
13. • Nếu thuộc tính của padding có hai giá trị: • padding: 25px 50px tương ứng với: – padding-top và padding-bottom là 25px – padding-right và padding-left là 50px
14. • Nếu thuộc tính của padding có một giá trị: • padding: 25px tương ứng với: – Tất cả bốn thuộc tính là 25px
15. • Ví dụ 3: • div.ex1 { padding: 25px 50px 75px 100px; }div.ex2 { padding: 25px 50px 75px; }div.ex3 { padding: 25px 50px; }div.ex4 { padding: 25px; }
16. HTML: Sử dụng thuộc tính padding rút gọn Phần tử div này có padding top là 25px, padding right là 50px, padding bottom là 75px và padding left là 100px. Phần tử div này có padding top là 25px, padding right và left là 50px, padding bottom là 75px. Phần tử div này có padding top và bottom là 25px, padding left và right là 50px. Phần tử div này có padding top, right, bottom và left là 25px.
17. • CSS: div { border: 1px solid black; background-color: lightblue; } div.ex1 { padding: 25px 50px 75px 100px; } div.ex2 { padding: 25px 50px 75px; } div.ex3 { padding: 25px 50px; } div.ex4 { padding: 25px; }
18. • Các ví dụ khác • Tất cả các thuộc tính padding trong một khai báo Ví dụ này sử dụng thuộc tính rút gọn cho tất cả các thuộc tính padding trong một khai báo, các giá trị truyền từ 1 đến 4 giá trị. • Thiết lập padding bên trái Ví dụ này giới thiệu cách thiết lập padding bên trái của phần tử . • Thiết lập padding bên phải Ví dụ này giới thiệu cách thiết lập padding bên phải của phần tử . • Thiết lập padding top Ví dụ này giới thiệu cách thiết lập padding bên trên của phần tử . • Thiết lập padding bottom Ví dụ này giới thiệu cách thiết lập padding bên dưới của phần tử .