Thuộc tính padding-block trong CSS
Bùi Tấn Lực - 875
- 08/10/2025
Chức năng của Thuộc tính padding-block trong CSS
Thuộc tính padding-block trong CSS dùng để quy định khoảng cách giữa cạnh trên và cạnh dướ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-block trong CSS
padding-block: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh trên và cạnh dưới của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
Ví dụ: padding-block:10px;
padding-block:giatri1 giatri2;
giatri1: Giá trị để quy định khoảng cách giữa cạnh trên của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
giatri2: Giá trị để quy định khoảng cách giữa cạnh dưới của phần tử HTML với các phần tử con của nó (Ví dụ:10px, 2%, 2em,....)
Ví dụ: padding-block:10px 30px;
Code Thuộc tính padding-block trong CSS
padding-block:10px;
(Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 10px)
padding-block:10px 30px;
(Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 30px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-block 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 trong CSS</h1>
<span>Quy định khoảng cách giữa cạnh trên và cạnh dướ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-block:10px"><p>padding-block:10px (Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 10px)</p></div>
<div style="padding-block:10px 30px"><p>padding-block:10px 30px (Cạnh trên cách các phần tử con 10px, Cạnh dưới cách các phần tử con 30px)</p></div>
<div style="padding-block:5%"><p>padding-block:5% (Cạnh trên cách các phần tử con 5%, Cạnh dưới cách các phần tử con 5%)</p></div>
<div style="padding-block:2em"><p>padding-block:2em (Cạnh trên cách các phần tử con 2em, Cạnh dưới cách các phần tử con 2em)</p></div>
<div style="padding-block:0"><p>padding-block:0 (Cạnh trên cách các phần tử con 0px, Cạnh dưới cách các phần tử con 0px)</p></div>
<div style="padding-block:0px"><p>padding-block:0px (Cạnh trên cách các phần tử con 0px, Cạnh dưới cách các phần tử con 0px)</p></div>
</body>
</html>
Khi nào nên dùng padding-block trong CSS?
padding-block phù hợp khi bạn muốn kiểm soát khoảng đệm theo chiều block mà không phải xác định trực tiếp cạnh trên và cạnh dưới. Cách viết này đặc biệt hữu ích khi xây dựng giao diện có khả năng thích ứng với nhiều kiểu bố cục hoặc hướng hiển thị văn bản.
padding-block giúp CSS dễ thích ứng với bố cục như thế nào?
Thay vì gắn khoảng đệm cố định vào padding-top và padding-bottom, padding-block sử dụng hướng block của phần tử để xác định vùng đệm. Nhờ đó, cùng một đoạn CSS có thể hoạt động linh hoạt hơn khi cách trình bày nội dung thay đổi.
Điều này đặc biệt có giá trị với các giao diện cần hỗ trợ nhiều kiểu writing-mode. Bạn chỉ cần mô tả khoảng đệm theo vai trò trong bố cục thay vì phải quan tâm chính xác nó đang nằm ở cạnh nào.
padding-block khác gì so với padding-top và padding-bottom?
padding-top và padding-bottom tác động trực tiếp đến cạnh trên và cạnh dưới của phần tử. Trong khi đó, padding-block xác định khoảng đệm ở hai phía theo trục block.
Với bố cục thông thường, hai cách viết có thể cho kết quả tương tự:
padding-top: 20px;
padding-bottom: 20px;
Có thể viết ngắn gọn theo hướng logic bằng:
padding-block: 20px;
Vì vậy, padding-block không đơn thuần giúp giảm số dòng CSS mà còn thể hiện rõ ý định bố cục, đặc biệt khi dự án sử dụng các thuộc tính CSS logical.
Khi nào nên kết hợp padding-block với padding-inline?
Khi cần kiểm soát khoảng đệm theo cả hai trục, kết hợp padding-block và padding-inline giúp CSS rõ ràng và nhất quán hơn. Một thuộc tính đảm nhiệm trục block, thuộc tính còn lại đảm nhiệm trục inline.
.card {
padding-block: 24px;
padding-inline: 20px;
}
Cách khai báo này thích hợp cho các thành phần như thẻ nội dung, nút, hộp thông báo hoặc khu vực văn bản cần duy trì khoảng cách cân đối mà không phụ thuộc quá nhiều vào hướng hiển thị cụ thể.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-block 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 *
