Thuộc tính padding-inline-end trong CSS
Bùi Tấn Lực - 850
- 08/10/2025
Chức năng của Thuộc tính padding-inline-end trong CSS
Thuộc tính padding-inline-end trong CSS dùng để quy định khoảng cách giữa 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-end trong CSS
padding-inline-end: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh phải của một thẻ HTML với các phần tử con nằm trong thẻ đó (Ví dụ: 0px, 5px, 2em, 2%,....)
Code Thuộc tính padding-inline-end trong CSS
padding-inline-end:10px; Cạnh phải cách các phần tử con 10px
padding-inline-end:0px; Cạnh phải cách các phần tử con 0px
padding-inline-end:10%; Cạnh phải cách các phần tử con 10%
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-inline-end 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-end trong CSS</h1>
<span>Quy định khoảng cách giữa 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-end:10px"><p>padding-inline-end:10px; Cạnh phải cách các phần tử con 10px</p></div>
<div style="padding-inline-end:10%"><p>padding-inline-end:10%; Cạnh phải cách các phần tử con 10%</p></div>
<div style="padding-inline-end:2em"><p>padding-inline-end:2em; Cạnh phải cách các phần tử con 2em</p></div>
<div style="padding-inline-end:0"><p>padding-inline-end:0; Cạnh phải cách các phần tử con 0px</p></div>
<div style="padding-inline-end:0px"><p>padding-inline-end:0px; Cạnh phải cách các phần tử con 0px</p></div>
</body>
</html>
So sánh padding-inline-end với padding-right trong CSS
padding-inline-end và padding-right đều có thể tạo khoảng đệm ở phía cuối của nội dung trong một số bố cục, nhưng cách xác định vị trí của chúng không giống nhau. padding-right luôn hướng đến cạnh phải, trong khi padding-inline-end xác định cạnh cuối dựa trên hướng viết của phần tử.
Khi nào nên sử dụng padding-inline-end?
Nên sử dụng padding-inline-end khi giao diện cần thích ứng với nhiều hướng viết hoặc muốn xây dựng CSS theo tư duy hiện đại, không phụ thuộc cố định vào trái và phải. Thuộc tính này đặc biệt hữu ích với website hỗ trợ nhiều ngôn ngữ.
Với bố cục thông thường từ trái sang phải, phần đệm cuối inline nằm ở phía bên phải. Khi hướng viết thay đổi, vị trí này cũng có thể thay đổi theo, giúp hạn chế việc phải viết thêm CSS riêng cho từng hướng.
padding-inline-end khác padding-right như thế nào?
Điểm khác biệt chính nằm ở cách xác định cạnh cần tạo khoảng đệm. padding-right dùng hướng vật lý nên luôn tác động đến cạnh phải. Ngược lại, padding-inline-end dùng hướng logic và xác định cạnh cuối của trục inline theo thiết lập hướng viết.
Vì vậy, padding-right phù hợp khi thiết kế thực sự cần tác động cố định đến cạnh phải. padding-inline-end phù hợp hơn khi muốn CSS linh hoạt và dễ thích ứng với các hướng viết khác nhau.
Ví dụ sử dụng padding-inline-end trong bố cục đa ngôn ngữ
Giả sử một thành phần có nội dung cần tạo khoảng cách ở phía cuối dòng. Thay vì khóa khoảng đệm vào cạnh phải, có thể sử dụng padding-inline-end để vị trí khoảng đệm được xác định theo hướng viết của phần tử.
.box {
padding-inline-end: 20px;
}
Cách viết này giúp cùng một quy tắc CSS có thể sử dụng trong nhiều ngữ cảnh mà không cần thay đổi thành padding-left hoặc padding-right chỉ vì hướng hiển thị của nội dung thay đổi.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-inline-end 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 *
