Code Thuộc tính block-size trong CSS

Trình soạn thảo - Code Thuộc tính block-size trong CSS

Kết quả - Code Thuộc tính block-size trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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>