Thuộc tính padding-inline-start trong CSS
Bùi Tấn Lực - 850
- 08/10/2025
Chức năng của Thuộc tính padding-inline-start trong CSS
Thuộc tính padding-inline-start trong CSS dùng để quy định khoảng cách giữa cạnh trá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-start trong CSS
padding-inline-start: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh trái của một thẻ HTML với các phần tử con nằm trong thẻ đó (Ví dụ: 0px, 10px, 1em, 2%,....)
Code Thuộc tính padding-inline-start trong CSS
padding-inline-start:10px
padding-inline-start:0px
padding-inline-start:10%
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-inline-start 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-start trong CSS</h1>
<span>Quy định khoảng cách giữa cạnh trá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-start:10px"><p>padding-inline-start:10px; Cạnh trái cách các phần tử con 10px</p></div>
<div style="padding-inline-start:10%"><p>padding-inline-start:10%; Cạnh trái cách các phần tử con 10%</p></div>
<div style="padding-inline-start:2em"><p>padding-inline-start:2em; Cạnh trái cách các phần tử con 2em</p></div>
<div style="padding-inline-start:0"><p>padding-inline-start:0; Cạnh trái cách các phần tử con 0px</p></div>
<div style="padding-inline-start:0px"><p>padding-inline-start:0px; Cạnh trái cách các phần tử con 0px</p></div>
</body>
</html>
padding-inline-start trong CSS và những tình huống sử dụng thực tế
padding-inline-start phát huy hiệu quả khi khoảng cách bên trong phần tử cần thích ứng với hướng viết của nội dung. Thay vì cố định khoảng đệm theo cạnh trái hoặc phải, thuộc tính này giúp giao diện hoạt động linh hoạt hơn khi thiết kế hỗ trợ nhiều ngôn ngữ và cách trình bày khác nhau.
Căn khoảng cách cho nội dung theo hướng viết
padding-inline-start tạo khoảng trống giữa nội dung và cạnh bắt đầu của vùng chứa. Với giao diện viết từ trái sang phải, cạnh bắt đầu thường nằm ở bên trái; với giao diện viết từ phải sang trái, vị trí này được chuyển sang bên phải.
Cách sử dụng này đặc biệt phù hợp với các thành phần như ô nhập liệu, danh sách, menu hoặc khối văn bản có nội dung thay đổi theo ngôn ngữ. Bạn chỉ cần xác định khoảng cách ở phía bắt đầu mà không phải tự xử lý từng hướng hiển thị.
Kết hợp padding-inline-start với padding-inline-end
Khi cần kiểm soát khoảng trống ở cả hai phía của nội dung, padding-inline-start có thể kết hợp với padding-inline-end. Cặp thuộc tính này giúp bố cục bám theo trục ngang của văn bản và dễ điều chỉnh hơn khi thiết kế thay đổi.
Ví dụ, một nút có thể tạo khoảng cách phía trước và phía sau nội dung mà không phụ thuộc vào việc văn bản đang hiển thị theo hướng nào:
.button {
padding-inline-start: 16px;
padding-inline-end: 16px;
}
Thay thế padding-left khi xây dựng giao diện đa ngôn ngữ
Trong giao diện chỉ sử dụng một hướng viết, padding-left có thể đáp ứng tốt nhu cầu thông thường. Tuy nhiên, khi trang web cần hỗ trợ cả nội dung từ phải sang trái, padding-inline-start mang lại cách tổ chức CSS nhất quán hơn.
Thay vì tạo thêm quy tắc để đổi padding-left thành padding-right, bạn có thể dùng padding-inline-start ngay từ đầu. Nhờ đó, cùng một khai báo CSS có thể thích ứng với hướng viết của nội dung.
Những trường hợp không nên dùng padding-inline-start
Không phải khoảng cách nào ở bên trái hoặc bên phải cũng nên chuyển sang padding-inline-start. Nếu thiết kế yêu cầu khoảng cách gắn cố định với một cạnh vật lý của màn hình, chẳng hạn một chi tiết luôn phải cách mép trái một giá trị cụ thể, padding-left có thể phù hợp hơn.
Điều quan trọng là phân biệt cạnh theo hướng viết với cạnh vật lý của giao diện. Nếu khoảng cách cần thay đổi theo hướng đọc, ưu tiên padding-inline-start; nếu vị trí phải luôn giữ nguyên theo cạnh trái hoặc phải, thuộc tính vật lý sẽ rõ ràng hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-inline-start 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 *
