Lập trình CSS - Bài 9: CSS Padding - Nguyễn Huyền

Bài 9: CSS PaddingBỞI NGUYEN HUYENCSS PaddingCSS 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).Padding cho từng cạnhCSS Padding có các thuộc tính sau:padding-toppadding-rightpadding-bottompadding-leftTấ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.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ắnCode 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-toppadding-rightpadding-bottompadding-leftVí 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à 25pxpadding-right là 50pxpadding-bottom là 75pxpadding-left là 100pxNếu thuộc tính của padding có ba giá trị:padding: 25px 50px 75px tương ứng với:padding-top là 25pxpadding-right và padding-left là 50pxpadding-bottom là 75pxNế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à 25pxpadding-right và padding-left là 50pxNế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à 25pxVí 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 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.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; }Các ví dụ khácTất cả các thuộc tính padding trong một khai báoVí 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áiVí 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 topVí 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 bottomVí dụ này giới thiệu cách thiết lập padding bên dưới của phần tử .