خصوصیت min-block-size در CSS اندازه حداقلی را که یک المان می‌تواند داشته باشد، به طور افقی یا عمودی بر اساس حالت نوشتاری خود، که با مقدار writing_mode متناظر است، تنظیم می‌کند. این مقدار معادل با خصوصیت min-width یا min-height است که بر اساس مقدار writing_mode است.
min-block-size حداقل عرض را برای حالت‌های نوشتاری با جهت عمودی تعیین می‌کند و حداقل ارتفاع را برای حالت‌های با جهت افقی تعیین می‌کند. خصوصیت min-inline-size بُعد دیگر را تعریف می‌کند.
مقادیر ممکن خصوصیت min-block-size مقادیر مجازی را که min-height و min-width قابل قبول هستند، قبول می‌کند.
length Value
این بخش نشان می‌دهد که چگونه خصوصیت min-block-size با مقدار 100 پیکسل، ارتفاع المان div را به حداقل 100 پیکسل تعیین می‌کند.
در این مثال، یک المان div با متن “Lorem Ipsum is simply dummy text of the printing and typesetting industry.” ایجاد شده است. این المان div با استفاده از CSS با ویژگی min-block-size به ارتفاع حداقل 100 پیکسل تنظیم شده است. به عبارت دیگر، حتی اگر متن درون المان div کمتر از 100 پیکسل ارتفاع داشته باشد، ارتفاع آن به حداقل 100 پیکسل تنظیم می‌شود.
<html>
<head>
<style>
div {
background-color: orange;
border: 2px solid blue;
min-block-size: 100px;
}
</style>
</head>
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>max-content Value
در این قسمت، خصوصیت min-block-size با مقدار max-content نشان داده شده است که حداقل ارتفاعی را که متن داخل المان می‌گیرد، تعیین می‌کند.
در مثال فوق، یک المان div ایجاد شده است که حاوی متن “Lorem Ipsum is simply dummy text of the printing and typesetting industry.” است. با استفاده از CSS و خصوصیت min-block-size با مقدار max-content، ارتفاع حداقلی برای المان div تنظیم شده است که دقیقاً منطبق با محتوای داخلی آن باشد. به این ترتیب، ارتفاع المان div به گونه‌ای تنظیم می‌شود که کاملاً جا شود متن داخلی آن.
<html>
<head>
<style>
div {
background-color: orange;
border: 2px solid blue;
min-block-size: max-content;
}
</style>
</head>
<body>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>With Horizontal and Vertical Text
در این قسمت، نحوه استفاده از خصوصیت min-block-size با استفاده از writing-modes برای نمایش متن در جهت عمودی نشان داده شده است.
در مثال فوق، یک المان div ایجاد شده است که حاوی یک پاراگراف است. با استفاده از CSS و خصوصیت min-block-size با مقدار 200px و همچنین writing-mode با مقدار vertical-rl، ارتفاع حداقلی برای المان div تنظیم شده است که حداقل ارتفاع آن 200 پیکسل باشد و متن داخلی در جهت عمودی نمایش داده شود.
با این ترتیب، المان div از جهت عمودی نمایش داده می‌شود و ارتفاع آن حداقل 200 پیکسل است.
<html>
<head>
<style>
div {
background-color: pink;
border: 2px solid blue;
min-block-size: 200px;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div>
<p>CSS min-block-size</p>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام