Thuộc tính padding-right trong CSS
Bùi Tấn Lực - 856
- 08/10/2025
Chức năng của Thuộc tính padding-right trong CSS
Thuộc tính padding-right 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-right trong CSS
padding-right: 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-right trong CSS
padding-right:10px; Cạnh phải cách các phần tử con 10px
padding-right:0px; Cạnh phải cách các phần tử con 0px
padding-right: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-right 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-right 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-right:10px"><p>padding-right:10px; Cạnh phải cách các phần tử con 10px</p></div>
<div style="padding-right:10%"><p>padding-right:10%; Cạnh phải cách các phần tử con 10%</p></div>
<div style="padding-right:2em"><p>padding-right:2em; Cạnh phải cách các phần tử con 2em</p></div>
<div style="padding-right:0"><p>padding-right:0; Cạnh phải cách các phần tử con 0px</p></div>
<div style="padding-right:0px"><p>padding-right:0px; Cạnh phải cách các phần tử con 0px</p></div>
</body>
</html>
Cách sử dụng padding-right hiệu quả trong thiết kế giao diện
padding-right phát huy hiệu quả khi cần tạo khoảng trống giữa nội dung bên trong phần tử và cạnh phải của chính phần tử đó. Tuy nhiên, để giao diện ổn định, nên lựa chọn cách áp dụng dựa trên cấu trúc bố cục thay vì chỉ thêm khoảng cách cho đến khi đạt vị trí mong muốn.
Khi nào nên dùng padding-right thay vì margin-right?
Hai thuộc tính đều tạo khoảng cách về phía bên phải nhưng tác động ở những vị trí khác nhau. padding-right tạo khoảng trống bên trong phần tử, còn margin-right tạo khoảng cách bên ngoài phần tử. Vì vậy, hãy dùng padding-right khi khoảng trống cần thuộc về vùng nội dung của phần tử.
Ví dụ, với một ô nhập liệu, padding-right phù hợp để tạo khoảng cách giữa nội dung nhập và cạnh phải của ô. Ngược lại, nếu cần đẩy một phần tử cách xa phần tử kế bên, margin-right thường là lựa chọn hợp lý hơn.
Phân biệt đúng hai thuộc tính ngay từ đầu giúp tránh tình trạng bố cục bị lệch hoặc phát sinh khoảng cách khó kiểm soát khi thay đổi kích thước giao diện.
Kết hợp padding-right với box-sizing để kiểm soát kích thước
Khi phần tử có width cố định, padding-right có thể ảnh hưởng đến kích thước hiển thị tùy theo giá trị của box-sizing. Với box-sizing: border-box, phần padding được tính trong kích thước đã khai báo, giúp việc kiểm soát chiều rộng dễ dự đoán hơn.
.box {
width: 300px;
padding-right: 24px;
box-sizing: border-box;
}
Cách thiết lập này đặc biệt hữu ích với các thành phần có kích thước cố định hoặc cần giữ bố cục nhất quán. Khi kết hợp padding-right với width, nên kiểm tra cả box-sizing để tránh việc tổng kích thước thực tế lớn hơn dự kiến.
Lưu ý khi sử dụng padding-right trên giao diện responsive
Khoảng đệm phù hợp trên màn hình lớn chưa chắc phù hợp với thiết bị nhỏ. Nếu đặt padding-right quá lớn, nội dung có thể bị thu hẹp, xuống dòng sớm hoặc làm thành phần giao diện trở nên chật chội.
Với giao diện responsive, nên ưu tiên giá trị padding-right vừa đủ và cân nhắc điều chỉnh khi không gian hiển thị thay đổi. Đối với các thành phần quan trọng như biểu mẫu, thanh điều hướng hoặc vùng chứa văn bản, cần kiểm tra thực tế ở nhiều kích thước màn hình thay vì chỉ đánh giá trên một độ rộng cố định.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-right 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 *
