Thuộc tính block-size trong CSS
Bùi Tấn Lực - 894
- 17/10/2025
Chức năng của Thuộc tính block-size trong CSS
Thuộc tính block-size trong CSS dùng để quy định chiều cao cho văn bản viết theo chiều ngang và quy định chiều rộng cho văn bản theo chiều dọc, mặc định tiếng việt hay tiếng anh thì viết theo chiều ngang, như tiếng nhật thì có thể viết theo chiêu ngang lẫn chiều dọc, để viết theo chiều dọc thì thêm writing-mode: vertical-rl; (Chế độ viết từ phải sang trái, từ trên xuống dưới) rồi sau đó dùng block-size để quy định chiều rộng.
Cú pháp của Thuộc tính block-size trong CSS
Quy định chiều cao cho văn bản theo chiều ngang
block-size: giatri;
giatri: Giá trị chiều cao cho văn bản theo chiều ngang (px, %, auto,...)
Quy định chiều rộng cho văn bản theo chiều dọc
Kết hợp với thuộc tính và giá trị writing-mode: vertical-rl; để quay dọc phần tử HTML.
block-size: giatri;
giatri: Giá trị chiều rộng cho văn bản theo chiều dọc(px, %, auto,...)
Code Thuộc tính block-size trong CSS
block-size: 80%; Quy định chiều cao cho văn bản theo chiều ngang 80%
block-size: auto; Quy định chiều cao cho văn bản theo chiều ngang auto
block-size: 50px; writing-mode: vertical-rl; Quy định chiều rộng cho văn bản theo chiều dọc 50px
block-size: 50px; Quy định chiều cao cho văn bản theo chiều ngang 50px
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính block-size trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%;float:left; border: 1px solid red; background:#ddd; margin-bottom:10px}
h2 {margin-bottom:5px}
p {margin:0px;padding:0px;color:#fff}
span {width:100%;float:left;height:auto;margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính block-size trong CSS</h1>
<span>Dùng để quy định chiều cao cho văn bản viết theo chiều ngang và quy định chiều rộng cho văn bản theo chiều dọc, mặc định tiếng việt hay tiếng anh thì viết theo chiều ngang, như tiếng nhật thì có thể viết theo chiêu ngang lẫn chiều dọc, để viết theo chiều dọc thì thêm writing-mode: vertical-rl; (Chế độ viết từ phải sang trái, từ trên xuống dưới) rồi sau đó dùng block-size để quy định chiều rộng:</span>
<h2>block-size: 50px; Quy định chiều cao cho văn bản theo chiều ngang 50px:</h2>
<div style="block-size: 50px;">block-size: 50px;</div>
<h2>block-size: 80%; Quy định chiều cao cho văn bản theo chiều ngang 80%:</h2>
<div style="height:100px" ><p style="block-size: 80%; background:green">block-size: 80%;</p></div>
<h2>block-size: auto; Quy định chiều cao cho văn bản theo chiều ngang auto:</h2>
<div style="block-size: auto;">block-size: auto;</div>
<h2>block-size: 50px; writing-mode: vertical-rl; Quy định chiều rộng cho văn bản theo chiều dọc 50px:</h2>
<div style="block-size: 50px; writing-mode: vertical-rl;">block-size: 50px; writing-mode: vertical-rl;</div>
</body>
</html>
Cách sử dụng block-size theo hướng viết của phần tử
Điểm quan trọng của block-size nằm ở cách CSS xác định kích thước theo trục block, thay vì cố định theo chiều cao hoặc chiều rộng vật lý của màn hình. Vì vậy, cùng một thuộc tính nhưng hướng tác động có thể thay đổi khi writing-mode của phần tử được thiết lập khác đi.
block-size hoạt động như thế nào với writing-mode mặc định
Ở chế độ viết mặc định horizontal-tb, nội dung được sắp xếp theo chiều ngang và các dòng mới được tạo theo chiều từ trên xuống. Khi đó, block-size tương ứng với kích thước theo chiều dọc, nên cách hoạt động khá gần với height.
Ví dụ, khi đặt block-size: 300px, phần tử sẽ có kích thước 300px trên trục block. Đây là cách sử dụng phù hợp khi muốn kiểm soát kích thước của một vùng nội dung mà không cần gắn trực tiếp thuộc tính với chiều cao vật lý.
box {
block-size: 300px;
}
Ưu điểm của cách viết này là khi thay đổi hướng viết của giao diện, quy tắc kích thước vẫn bám theo trục block thay vì phải sửa lại từng thuộc tính height hoặc width.
Kết hợp block-size với writing-mode: vertical-rl
Khi sử dụng writing-mode: vertical-rl, nội dung được bố trí theo hướng dọc và trục block thay đổi theo chiều ngang. Lúc này, block-size không còn tương ứng với chiều cao vật lý như trong cách viết mặc định.
box {
writing-mode: vertical-rl;
block-size: 300px;
}
Trong trường hợp này, giá trị 300px được áp dụng cho kích thước trên trục block mới. Đây chính là điểm giúp block-size linh hoạt hơn các thuộc tính kích thước dựa trực tiếp vào chiều ngang hoặc chiều dọc.
Cách tiếp cận này đặc biệt hữu ích khi xây dựng giao diện hỗ trợ nhiều hướng viết, bởi CSS có thể duy trì logic bố cục theo trục nội dung thay vì phụ thuộc vào hướng hiển thị cụ thể.
block-size khác gì với height và width trong CSS
height và width xác định kích thước theo chiều cao và chiều rộng vật lý của phần tử. Ngược lại, block-size xác định kích thước theo trục block và chịu ảnh hưởng bởi writing-mode.
| Thuộc tính | Cách xác định kích thước |
|---|---|
| height | Chiều cao vật lý của phần tử |
| width | Chiều rộng vật lý của phần tử |
| block-size | Kích thước theo trục block |
Với giao diện thông thường, height vẫn là lựa chọn quen thuộc khi cần kiểm soát chiều cao. Tuy nhiên, nếu muốn CSS thích ứng theo hướng viết và xây dựng bố cục theo logical properties, block-size sẽ mang lại cách tổ chức nhất quán hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính block-size 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 *
