CSS Padding
Padding được sử dụng để tạo không gian xung quanh nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.
CSS Padding
Thuộc tính CSS paddingđược sử dụng để tạo không gian xung quanh nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.
Với CSS, bạn có toàn quyền kiểm soát phần đệm. Có các thuộc tính để thiết lập phần đệm cho mỗi bên của một phần tử (trên cùng, bên phải, dưới cùng và bên trái).
Padding - Các mặt riêng lẻ
CSS có các thuộc tính để chỉ định phần đệm cho mỗi bên của phần tử:
padding-toppadding-rightpadding-bottompadding-left
Tất cả các thuộc tính padding có thể có các giá trị sau:
- length - chỉ định một khoảng đệm bằng px, pt, cm, v.v.
- % - chỉ định một khoảng đệm tính bằng% chiều rộng của phần tử chứa
- thừa kế - chỉ định rằng phần đệm phải được kế thừa từ phần tử mẹ
Lưu ý: Giá trị âm không được phép.
Thí dụ
Đặt các khoảng đệm khác nhau cho tất cả bốn cạnh của phần tử <div>:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Thuộc tính tốc ký
Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính đệm trong một thuộc tính.
Thuộc paddingtính là một thuộc tính viết tắt cho các thuộc tính đệm riêng lẻ sau:
padding-toppadding-rightpadding-bottompadding-left
Vì vậy, đây là cách nó hoạt động:
Nếu thuộc paddingtính có bốn giá trị:
- đệm: 25px 50px 75px 100px;
- đệm trên cùng là 25px
- đệm bên phải là 50px
- đệm dưới cùng là 75px
- đệm bên trái là 100px
Thí dụ
Sử dụng thuộc tính viết tắt padding với bốn giá trị:
div {
padding: 25px 50px 75px 100px;
}
Nếu thuộc paddingtính có ba giá trị:
- đệm: 25px 50px 75px;
- đệm trên cùng là 25px
- đệm phải và trái là 50px
- đệm dưới cùng là 75px
Thí dụ
Sử dụng thuộc tính viết tắt padding với ba giá trị:
div {
padding: 25px 50px 75px;
}
Nếu thuộc paddingtính có hai giá trị:
- đệm: 25px 50px;
- đệm trên và dưới là 25px
- đệm phải và trái là 50px
Thí dụ
Sử dụng thuộc tính viết tắt padding với hai giá trị:
div {
padding: 25px 50px;
}
Nếu thuộc paddingtính có một giá trị:
- đệm: 25px;
- tất cả bốn paddings là 25px
Thí dụ
Sử dụng thuộc tính viết tắt padding với một giá trị:
div {
padding: 25px;
}
Phần đệm và chiều rộng phần tử
Thuộc tính CSS widthchỉ định chiều rộng của vùng nội dung của phần tử. Vùng nội dung là phần bên trong phần đệm, đường viền và lề của một phần tử ( mô hình hộp ).
Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn.
Thí dụ
Ở đây, phần tử <div> có chiều rộng là 300px. Tuy nhiên, chiều rộng thực tế của phần tử <div> sẽ là 350px (300px + 25px đệm bên trái + 25px đệm phải):
div {
width: 300px;
padding: 25px;
}
Để giữ chiều rộng ở 300px, bất kể số lượng padding, bạn có thể sử dụng thuộc
box-sizingtính. Điều này làm cho phần tử duy trì chiều rộng thực của nó; nếu bạn tăng khoảng đệm, không gian nội dung có sẵn sẽ giảm.
Thí dụ
Sử dụng thuộc tính box-sizing để giữ chiều rộng ở 300px, bất kể số lượng padding:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Các ví dụ khác
Ví dụ này trình bày cách đặt phần đệm bên trái của phần tử <p>.
Ví dụ này trình bày cách đặt đúng phần đệm của một phần tử <p>.
Ví dụ này trình bày cách đặt phần đệm trên cùng của phần tử <p>.
Ví dụ này trình bày cách đặt phần đệm dưới cùng của phần tử <p>.
Tất cả các thuộc tính đệm CSS
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |