Thuộc tính padding-block-start trong CSS
Bùi Tấn Lực - 843
- 08/10/2025
Chức năng của Thuộc tính padding-block-start trong CSS
Thuộc tính padding-block-start trong CSS dùng để quy định khoảng cách giữa cạnh trên 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-block-start trong CSS
padding-block-start: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh trên của một thẻ HTML với các phần tử con nằm trong thẻ đó (Ví dụ: 0px, 4px, 3em, 3%,.....)
Code Thuộc tính padding-block-start trong CSS
padding-block-start:10px; Cạnh trên cách các phần tử con 10px
padding-block-start:0px; Cạnh trên cách các phần tử con 0px
padding-block-start:10%; Cạnh trên cách các phần tử con 10%
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-block-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-block-start trong CSS</h1>
<span>Quy định khoảng cách giữa cạnh trên 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-block-start:10px"><p>padding-block-start:10px; Cạnh trên cách các phần tử con 10px</p></div>
<div style="padding-block-start:10%"><p>padding-block-start:10%; Cạnh trên cách các phần tử con 10%</p></div>
<div style="padding-block-start:2em"><p>padding-block-start:2em; Cạnh trên cách các phần tử con 2em</p></div>
<div style="padding-block-start:0"><p>padding-block-start:0; Cạnh trên cách các phần tử con 0px</p></div>
<div style="padding-block-start:0px"><p>padding-block-start:0px; Cạnh trên cách các phần tử con 0px</p></div>
</body>
</html>
Cách sử dụng padding-block-start hiệu quả trong CSS
padding-block-start phát huy hiệu quả khi bố cục cần thích ứng với hướng viết hoặc khi muốn kiểm soát khoảng đệm ở đầu vùng block mà không phụ thuộc trực tiếp vào vị trí trên màn hình. Để sử dụng hợp lý, nên xem xét mối quan hệ giữa thuộc tính này với các khoảng đệm còn lại và cách bố cục thay đổi trên từng thiết bị.
Kết hợp padding-block-start với các thuộc tính padding khác
Có thể dùng padding-block-start cùng với padding-block-end, padding-inline-start và padding-inline-end để kiểm soát từng cạnh một cách rõ ràng. Cách viết này đặc biệt hữu ích khi mỗi hướng cần một khoảng đệm khác nhau.
.card {
padding-block-start: 24px;
padding-block-end: 16px;
padding-inline-start: 20px;
padding-inline-end: 20px;
}
Trong trường hợp các cạnh có cùng quy tắc, có thể kết hợp shorthand padding với thuộc tính logical tương ứng. Tuy nhiên, nên tránh khai báo chồng chéo nếu không thực sự cần thiết, vì thứ tự CSS có thể khiến giá trị cuối cùng khác với dự định.
Sử dụng padding-block-start trong thiết kế responsive
Khoảng đệm đầu vùng nội dung thường cần thay đổi giữa màn hình lớn và nhỏ. Có thể điều chỉnh padding-block-start bằng media query thay vì tạo nhiều lớp CSS riêng cho từng thành phần.
.section {
padding-block-start: 48px;
}
@media (max-width: 768px) {
.section {
padding-block-start: 28px;
}
}
Cách này giúp nội dung trên thiết bị nhỏ không bị chiếm quá nhiều không gian, đồng thời vẫn giữ được khoảng cách hợp lý trên màn hình lớn. Khi xây dựng giao diện, nên ưu tiên giá trị dựa trên nhu cầu thực tế của bố cục thay vì tăng khoảng đệm chỉ để tạo cảm giác thoáng.
Những trường hợp nên ưu tiên padding-block-start
Nên ưu tiên padding-block-start khi muốn mô tả khoảng đệm theo logic của hướng viết thay vì gắn cố định với cạnh trên của màn hình. Điều này giúp CSS linh hoạt hơn khi giao diện có thể thay đổi writing-mode hoặc hỗ trợ nhiều ngôn ngữ.
Thuộc tính này cũng phù hợp với các thành phần như phần mở đầu của khối nội dung, tiêu đề trong thẻ, khu vực đầu section hoặc những bố cục cần duy trì khoảng cách theo trục block. Cách tiếp cận này giúp mã CSS thể hiện đúng ý nghĩa bố cục và thuận tiện hơn khi mở rộng giao diện về sau.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-block-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 *
