Thuộc tính min-block-size trong CSS tạo kích thước tối thiểu theo chiều ngang/dọc của một phần tử. Nếu hướng chữ là ngang thì min-block-size tương đương thuộc tính min-height. Ngược lại, nếu hướng chữ dọc thì tương đương thuộc tính min-width.
Cú pháp:
min-block-size: length| percentage| auto| none| min-content|
max-content| fit-content| inherit| initial| unset;
Giá trị thuộc tính:
- length: Đặt một giá trị cố định bằng px, cm, pt... Giá trị âm cũng được chấp nhận. Giá trị mặc định là 0px.
- percentage (%): Tương tự length, nhưng kích thước được tính theo tỷ lệ phần trăm so với kích thước cửa sổ.
- auto: Sử dụng khi bạn muốn trình duyệt tự xác định block-size.
- none: Sử dụng khi bạn không muốn giới hạn kích thước của hộp.
- max-content: Sử dụng khi bạn ưu tiên min-width cho kích thước của hộp.
- min-content: Sử dụng khi bạn ưu tiên min-width cho kích thước của hộp.
- fit-content: Sử dụng khi bạn ưu tiên exact-width cho kích thước của hộp.
- initial: Sử dụng để đặt giá trị của thuộc tính min-block-size về mặc định.
- inherit: Sử dụng khi bạn muốn phần tử kế thừa thuộc tính min-block-size từ phần tử cha.
- unset: Sử dụng để bỏ cài đặt min-block-size mặc định.
Các ví dụ dưới đây minh họa thuộc tính min-block-size trong CSS:
Ví dụ 1:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS | min-block-size Property</title>
<style>
h1 {
color: green;
}
div {
background-color: green;
width: 200px;
height: 20px;
}
.one {
position: relative;
min-block-size: 10px;
background-color: cyan;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | min-block-size Property</b>
<br><br>
<div>
<p class="one">
A Computer Science Portal for Geeks
</p>
</div>
</center>
</body>
</html>
Đầu ra:
Ví dụ 2:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS | min-block-size Property</title>
<style>
h1 {
color: green;
}
div {
background-color: green;
width: 200px;
height: 20px;
}
.one {
position: relative;
writing-mode: vertical-rl;
min-block-size: auto;
background-color: cyan;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | min-block-size Property</b>
<br><br>
<div>
<p class="one">
A Computer Science Portal for Geeks
</p>
</div>
</center>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính min-block-size được liệt kê dưới đây:
- Firefox 41+
- Google Chrome 57+
- Edge 79+
- Opera 44+
- Safari 12.1+
Tham khảo: https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size