Bài giảng CSS - Bài 9: CSS Padding

Chia sẻ: Phuc Nguyen | Ngày: | Loại File: PPTX | Số trang:22

Thêm vào BST

Báo xấu

61
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng cung cấp cho người học các kiến thức: CSS Padding, điều khiển padding, padding cho từng cạnh, thuộc tính của CSS, thuộc tính của padding,... Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu. Mời các bạn cùng tham khảo chi tiết nội dung tài liệu.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng CSS - Bài 9: CSS Padding

Bài 9: CSS Padding BỞI NGUYEN HUYEN
• 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
• 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:
• 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; }
• 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.
CSS: div { border: 1px solid black; background- color: lightblue; padding-top: 50px; padding- right: 30px; padding-bottom: 50px; padding- left: 80px; }
• 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
• Ví dụ 2: • p { padding: 50px 30px 50px 80px; }
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.
• CSS: div { border: 1px solid black; background- color: lightblue; padding: 50px 30px 50px 80px; }
• 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
• 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
• 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
• 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
• 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; }
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
• 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; }