Thuộc tính padding-inline trong CSS
Bùi Tấn Lực - 858
- 08/10/2025
Chức năng của Thuộc tính padding-inline trong CSS
Thuộc tính padding-inline trong CSS dùng để quy định khoảng cách giữa cạnh trái và cạnh phải của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể dùng đơn vị px, em, % để quy định khoảng cách.
Cú pháp của Thuộc tính padding-inline trong CSS
padding-inline: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh trái và cạnh phải của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
Ví dụ: padding-inline:10px;
padding-inline:giatri1 giatri2;
giatri1: Giá trị để quy định khoảng cách giữa cạnh trái của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
giatri2: Giá trị để quy định khoảng cách giữa cạnh phải của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
Ví dụ: padding-inline:10px 30px;
Code Thuộc tính padding-inline trong CSS
padding-inline:10px; (Cạnh trái cách các phần tử con 10px, Cạnh phải cách các phần tử con 10px)
padding-inline:10px 30px; (Cạnh trái cách các phần tử con 10px, Cạnh phải cách các phần tử con 30px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-inline trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; margin-bottom:10px; border:1px solid red}
p {background:green; width:100%; float:left; margin:0px; padding:25px;color:#fff}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính padding-inline trong CSS</h1>
<span>Quy định khoảng cách giữa cạnh trái và cạnh phải của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể dùng đơn vị px, em, % để quy định khoảng cách:</span>
<div style="padding-inline:10px"><p>padding-inline:10px; (Cạnh trái cách các phần tử con 10px, Cạnh phải cách các phần tử con 10px)</p></div>
<div style="padding-inline:10px 30px"><p>padding-inline:10px 30px; (Cạnh trái cách các phần tử con 10px, Cạnh phải cách các phần tử con 30px)</p></div>
<div style="padding-inline:5%"><p>padding-inline:5%; (Cạnh trái cách các phần tử con 5%, Cạnh phải cách các phần tử con 5%)</p></div>
<div style="padding-inline:2em"><p>padding-inline:2em; (Cạnh trái cách các phần tử con 2em, Cạnh phải cách các phần tử con 2em)</p></div>
<div style="padding-inline:0"><p>padding-inline:0; (Cạnh trái cách các phần tử con 0px, Cạnh phải cách các phần tử con 0px)</p></div>
<div style="padding-inline:0px"><p>padding-inline:0px; (Cạnh trái cách các phần tử con 0px, Cạnh phải cách các phần tử con 0px)</p></div>
</body>
</html>
Ứng dụng của padding-inline trong CSS
padding-inline đặc biệt hữu ích khi xây dựng giao diện cần thích ứng với nhiều kích thước màn hình hoặc hỗ trợ các hướng viết khác nhau. Thay vì thiết lập riêng khoảng đệm bên trái và bên phải, bạn có thể kiểm soát khoảng cách theo trục inline bằng một thuộc tính duy nhất.
padding-inline giúp thiết kế giao diện responsive như thế nào?
Trong giao diện responsive, khoảng đệm hai bên thường cần thay đổi theo không gian hiển thị. padding-inline giúp việc này đơn giản hơn vì có thể điều chỉnh đồng thời hai phía mà không phải khai báo nhiều thuộc tính riêng lẻ.
Chẳng hạn, một khối nội dung có thể giữ khoảng cách hợp lý với mép màn hình trên điện thoại, đồng thời có khoảng đệm rộng hơn khi hiển thị trên màn hình lớn. Cách viết này giúp CSS dễ quản lý và thuận tiện khi kết hợp với media query.
.content {
padding-inline: 16px;
}
@media (min-width: 768px) {
.content {
padding-inline: 32px;
}
}
Cách tiếp cận này phù hợp với các thành phần như vùng nội dung, thanh điều hướng, thẻ sản phẩm hoặc biểu mẫu. Khi cần thay đổi khoảng cách hai bên, chỉ cần điều chỉnh giá trị của padding-inline thay vì tìm và sửa từng thuộc tính riêng.
Khi nào nên dùng padding-inline thay cho padding-left và padding-right?
Nên ưu tiên padding-inline khi khoảng đệm cần được xác định theo chiều inline và hai phía có cùng giá trị. Đây là lựa chọn gọn hơn so với việc khai báo đồng thời padding-left và padding-right.
.box {
padding-inline: 24px;
}
Điểm đáng chú ý là padding-inline thuộc nhóm thuộc tính logic của CSS. Vì vậy, cách viết này phù hợp hơn khi giao diện có thể sử dụng các hướng viết khác nhau, thay vì cố định theo trái và phải như các thuộc tính vật lý.
Nếu hai phía cần khoảng đệm khác nhau, bạn vẫn có thể truyền hai giá trị cho padding-inline hoặc sử dụng padding-inline-start và padding-inline-end để kiểm soát từng phía cụ thể.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-inline trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
