Thuộc tính padding-block-end trong CSS
Bùi Tấn Lực - 879
- 08/10/2025
Chức năng của Thuộc tính padding-block-end trong CSS
Thuộc tính padding-block-end trong CSS dùng để quy định khoảng cách giữa 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-end trong CSS
padding-block-end: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó (Ví dụ: 10px, 10%, 2em,....)
Code Thuộc tính padding-block-end trong CSS
padding-block-end:10px; Cạnh dưới cách các phần tử con 10px
padding-block-end:0px; Cạnh dưới cách các phần tử con 0px
padding-block-end:10%; Cạnh dưới cách các phần tử con 10%
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-block-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-block-end trong CSS</h1>
<span>Quy định khoảng cách giữa 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-end:10px"><p>padding-block-end:10px; Cạnh dưới cách các phần tử con 10px</p></div>
<div style="padding-block-end:10%"><p>padding-block-end:10%; Cạnh dưới cách các phần tử con 10%</p></div>
<div style="padding-block-end:2em"><p>padding-block-end:2em; Cạnh dưới cách các phần tử con 2em</p></div>
<div style="padding-block-end:0"><p>padding-block-end:0; Cạnh dưới cách các phần tử con 0px</p></div>
<div style="padding-block-end:0px"><p>padding-block-end:0px; Cạnh dưới cách các phần tử con 0px</p></div>
</body>
</html>
Những điều cần biết khi sử dụng padding-block-end trong CSS
padding-block-end là một logical property, vì vậy cách tạo khoảng đệm của nó phụ thuộc vào hướng của nội dung thay vì cố định theo cạnh dưới của phần tử. Hiểu rõ cơ chế này sẽ giúp bố cục hoạt động linh hoạt hơn khi thay đổi writing-mode hoặc xây dựng giao diện hỗ trợ nhiều cách trình bày văn bản.
padding-block-end hoạt động như thế nào với writing-mode?
padding-block-end xác định khoảng đệm ở phía cuối của trục block. Vị trí này không phải lúc nào cũng tương ứng với cạnh dưới của phần tử. Khi giá trị writing-mode thay đổi, hướng của trục block cũng có thể thay đổi theo.
Với cách viết thông thường, writing-mode: horizontal-tb, phần cuối của trục block nằm ở phía dưới nên padding-block-end thường cho kết quả tương tự padding-bottom. Tuy nhiên, trong các chế độ viết khác, vị trí này có thể nằm ở cạnh khác của phần tử.
.content {
writing-mode: vertical-rl;
padding-block-end: 24px;
}
Cách tiếp cận này đặc biệt hữu ích khi giao diện cần thích ứng với nhiều hệ thống chữ viết. Thay vì xác định khoảng đệm theo một cạnh vật lý cố định, CSS sẽ xử lý theo hướng trình bày của nội dung.
padding-block-end khác gì với padding-bottom?
padding-bottom luôn tác động đến cạnh dưới của phần tử theo hệ tọa độ vật lý. Trong khi đó, padding-block-end xác định cạnh cuối của trục block dựa trên writing-mode.
Ở giao diện sử dụng cách viết ngang từ trên xuống, hai thuộc tính thường tạo ra kết quả giống nhau:
.box {
padding-bottom: 20px;
}
.box {
padding-block-end: 20px;
}
Tuy nhiên, chúng không hoàn toàn tương đương về ý nghĩa. padding-bottom phù hợp khi bạn thực sự muốn tác động đến cạnh dưới, còn padding-block-end phù hợp khi khoảng đệm cần đi theo cấu trúc của nội dung.
Khi nào nên dùng padding-block-end thay cho padding-bottom?
Nên ưu tiên padding-block-end khi xây dựng giao diện theo hướng logical properties, đặc biệt nếu bố cục có khả năng thay đổi writing-mode hoặc cần thích ứng với nhiều ngôn ngữ.
Ngược lại, nếu thiết kế yêu cầu khoảng đệm luôn nằm ở cạnh dưới bất kể hướng trình bày, padding-bottom sẽ diễn đạt mục đích rõ ràng hơn.
Chọn đúng thuộc tính ngay từ đầu giúp CSS dễ bảo trì và hạn chế việc phải thay đổi nhiều quy tắc khi giao diện được mở rộng. Với các bố cục hiện đại, padding-block-end là lựa chọn đáng cân nhắc khi vị trí khoảng đệm được xác định theo hướng nội dung thay vì theo cạnh vật lý.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-block-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 *
