Thuộc tính padding-left trong CSS
Bùi Tấn Lực - 868
- 08/10/2025
Chức năng của Thuộc tính padding-left trong CSS
Thuộc tính padding-left 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-left trong CSS
padding-left: 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-left trong CSS
padding-left:10px; Cạnh trái cách các phần tử con 10px
padding-left:0px; Cạnh trái cách các phần tử con 0px
padding-left:10%; Cạnh trái cách các phần tử con 10%
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-left 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-left 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-left:10px"><p>padding-left:10px; Cạnh trái cách các phần tử con 10px</p></div>
<div style="padding-left:10%"><p>padding-left:10%; Cạnh trái cách các phần tử con 10%</p></div>
<div style="padding-left:2em"><p>padding-left:2em; Cạnh trái cách các phần tử con 2em</p></div>
<div style="padding-left:0"><p>padding-left:0; Cạnh trái cách các phần tử con 0px</p></div>
<div style="padding-left:0px"><p>padding-left:0px; Cạnh trái cách các phần tử con 0px</p></div>
</body>
</html>
Ứng dụng padding-left trong CSS vào thiết kế giao diện
Trong giao diện thực tế, padding-left thường được dùng để tạo khoảng đệm giữa nội dung và cạnh trái của phần tử. Việc điều chỉnh khoảng đệm này giúp văn bản, biểu mẫu hoặc các thành phần bên trong có vị trí cân đối hơn mà không cần thay đổi kích thước hay vị trí của chính phần tử.
Tạo khoảng cách giữa nội dung và cạnh trái phần tử
Đây là cách sử dụng phổ biến nhất của padding-left. Khi nội dung nằm quá sát cạnh trái, có thể thêm khoảng đệm để giao diện dễ đọc và thoáng hơn.
.box {
padding-left: 24px;
}
Với thiết lập trên, nội dung bên trong .box được đẩy vào 24px tính từ cạnh trái. Khoảng trống này thuộc vùng padding nên không làm thay đổi khoảng cách giữa phần tử với các phần tử bên ngoài như margin.
Kết hợp padding-left với border và background
padding-left đặc biệt hữu ích khi phần tử có border hoặc background. Khoảng đệm giúp nội dung không bị dính sát vào đường viền, đồng thời giữ phần nền liền mạch phía sau nội dung.
.notice {
padding-left: 16px;
border-left: 4px solid #333;
background: #f5f5f5;
}
Cách này phù hợp với các khối thông báo, ghi chú hoặc nội dung cần tạo điểm nhấn ở bên trái. Thay vì dùng nhiều thuộc tính để dịch chuyển văn bản, chỉ cần điều chỉnh padding-left là có thể kiểm soát khoảng cách bên trong một cách rõ ràng.
Điều chỉnh padding-left khi thiết kế giao diện responsive
Khoảng đệm bên trái nên được cân nhắc theo kích thước màn hình. Giá trị phù hợp trên màn hình lớn có thể khiến nội dung bị thu hẹp khi hiển thị trên thiết bị nhỏ. Có thể thay đổi padding-left trong media query để giữ bố cục gọn gàng.
.content {
padding-left: 32px;
}
@media (max-width: 768px) {
.content {
padding-left: 16px;
}
}
Cách điều chỉnh này giúp nội dung vẫn có khoảng cách cần thiết với cạnh trái nhưng hạn chế việc lãng phí không gian trên màn hình hẹp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-left 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 *
