Padding trong CSS: Trong CSS, thuộc tính padding được sử dụng để thêm không gian bên trong của phần tử HTML, tức là khoảng cách từ biên của phần tử đến nội dung bên trong nó. Padding tạo ra một khoảng trống giữa viền của phần tử và nội dung bên trong. Dưới đây là một số ví dụ về cách sử dụng thuộc tính padding trong CSS:
- Padding Đơn (Single Padding): Điều chỉnh khoảng cách bên trong phần tử.
css
/* Đặt padding đơn cho tất cả các cạnh là 10px */
padding: 10px;
/* Đặt padding đơn khác nhau cho từng cạnh (trên, phải, dưới, trái) */
padding: 5px 10px 15px 20px; /* trên, phải, dưới, trái */
- Padding Theo Cạnh (Padding on Specific Sides): Điều chỉnh padding cho từng cạnh riêng lẻ.
css
/* Đặt padding trên là 15px */
padding-top: 15px;
/* Đặt padding dưới là 20px */
padding-bottom: 20px;
- Padding Trong Phần Tử Inline (Padding on Inline Elements): Padding không thể được áp dụng trực tiếp cho phần tử inline như văn bản, nhưng có thể sử dụng
display: inline-block;hoặcdisplay: block;để áp dụng padding.
css
/* Áp dụng padding cho phần tử inline bằng cách thay đổi kiểu hiển thị */
display: inline-block;
padding: 10px;
- Padding và Box Sizing (Padding and Box Sizing): Mặc định, padding được tính toán thêm vào chiều rộng và chiều cao của phần tử (box). Nếu bạn muốn padding không ảnh hưởng đến chiều rộng và chiều cao của phần tử, bạn có thể sử dụng thuộc tính
box-sizing.
css
/* Sử dụng thuộc tính box-sizing để padding không ảnh hưởng đến chiều rộng và chiều cao */
box-sizing: border-box;
Thuộc tính padding rất hữu ích để tạo khoảng trống bên trong phần tử, tạo độ tách biệt giữa nội dung và viền. Bạn có thể sử dụng nó để tạo bố cục và giao diện phù hợp cho trang web của bạn.