Bùi Tấn Lực - 96
- 17/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính block-size trong CSS
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>
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 *
