در فصل‌های قبلی، یادگرفتیم که چگونه از طریق CSS padding، margin، border و غیره را به یک عنصر اضافه کنیم. اکنون می‌خواهیم ببینیم چگونه ابعاد یک عنصر را تنظیم کنیم. در اینجا می‌خواهیم بررسی کنیم که چگونه شرایطی را برای محدود کردن ارتفاع یا عرض یک عنصر تنظیم کنیم، همچنین مواردی که می‌خواهید مرورگر به طور خودکار عرض، ارتفاع یا هر دو را محاسبه کند.
ویژگی‌های زیر به شما امکان کنترل ابعاد یک عنصر را می‌دهند:
height: ارتفاع یک عنصر را تعیین می‌کند.width: عرض یک عنصر را تعیین می‌کند.line-height: ارتفاع یک خط متن را تعیین می‌کند.max-height: حداکثر ارتفاعی که یک عنصر می‌تواند داشته باشد را تعیین می‌کند.min-height: حداقل ارتفاعی که یک عنصر می‌تواند داشته باشد را تعیین می‌کند.max-width: حداکثر عرضی که یک عنصر می‌تواند داشته باشد را تعیین می‌کند.min-width: حداقل عرضی که یک عنصر می‌تواند داشته باشد را تعیین می‌کند.
با استفاده از این ویژگی‌ها، شما می‌توانید ابعاد یک عنصر را در CSS کنترل کنید و به شرایط مختلفی که ممکن است در طراحی وب برخورد کنید، پاسخ دهید.
طول و عرض (Height And Width)
پراپرتی‌های height و width به شما امکان مشخص کردن ارتفاع و عرض خاص برای المان موردنظرتان را می‌دهند. این پراپرتی‌ها می‌توانند مقادیر زیر را در خود نگهداری کنند:
- length: هر واحد طولی (px، pt، em، in، و غیره).
- percentage (%): مقدار درصدی که درصدی از بلوک محتوایی است.
- auto: مرورگر ارتفاع و عرض المان را محاسبه می‌کند. این مقدار پیش‌فرض است.
- initial: مقدار ارتفاع و عرض را به مقدار پیش‌فرض خود تنظیم می‌کند.
- inherit: مقدار ارتفاع و عرض را از مقدار والدین به ارث می‌برد.
در مثال زیر، استفاده از پراپرتی‌های height و width برای یک المان div نشان داده شده است:
<html>
<head>
<style>
div {
height: 100px;
width: 80%;
background-color: rgb(206, 211, 225);
}
</style>
</head>
<body>
<h2>Height and Width Property without layout properties</h2>
<div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>
در این مثال، پراپرتی‌های height و width به طور خاص به چیدمان المان اضافه نمی‌شوند، یعنی این مقادیر شامل padding، margin یا border نمی‌شوند.
در مثال زیر، تفاوتی که ایجاد می‌شود هنگام استفاده از پراپرتی‌های height و width برای یک المان div به همراه padding، border یا margin نشان داده شده است:
<html>
<head>
<style>
div {
height: 100px;
width: 80%;
padding: 2em;
border:1px solid;
margin:2px;
background-color: rgb(206, 211, 225);
}
</style>
</head>
<body>
<h2>Height and Width Property with padding, margin, border</h2>
<div>This div element has a height of 100px and a width of 80%.</div>
</body>
</html>
ویژگی line-height
ویژگی line-height به شما اجازه می‌دهد تا فاصله بین خطوط متن را تنظیم کنید. مقادیر ممکن برای ویژگی line-height عبارتند از:
- length: هر واحد طولی که در محاسبه ارتفاع جعبه خط استفاده می‌شود (px، pt، em، in و غیره).
- percentage (%): مقدار نسبت به اندازه فونت المان است.
- number: یک عدد بدون واحد، که در فونت خود المان ضرب می‌شود.
- normal: یک کلیدواژه. مقدار پیش‌فرض آن 1.2 است، اما بستگی به font-family المان دارد.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
div.a {
line-height: 2in;
font-size: 10pt;
background-color: rgb(206, 211, 225);
margin-bottom: 2px;
}
div.b {
line-height: 100px;
font-size: 10pt;
background-color: rgb(206, 211, 225);
margin-bottom: 2px;
}
div.c {
line-height: 5;
font-size: 10pt;
background-color: rgb(206, 211, 225);
margin-bottom: 5px;
}
div.d {
line-height: normal;
font-size: 10pt;
background-color: rgb(206, 211, 225);
margin-bottom: 2px;
}
</style>
</head>
<body>
<h2>line-height Property</h2>
<div class="a">This div element has a line-height of 2 inches.</div>
<div class="b">This div element has a line-height of 100px.</div>
<div class="c">This div element has a line-height of 5 (unitless number)</div>
<div class="d">This div element has a line-height of normal.</div>
</body>
</html>
در این مثال، چهار div ایجاد شده است که هرکدام با یک مقدار مختلف برای ویژگی line-height تعریف شده‌اند.
ویژگی max-height
ویژگی max-height به شما امکان محدود کردن ارتفاع یک عنصر را با استفاده از مشخص کردن یک ارتفاع حداکثری فراهم می‌کند. مقادیر ممکن برای ویژگی max-height عبارتند از:
- none: هیچ مقدار ارتفاع حداکثری تنظیم نشده است. مقدار پیش‌فرض.
- length: تعیین ارتفاع حداکثری با استفاده از واحدهای طول (px، pt، em، in و غیره).
- percentage (%): مقدار نسبت به درصد بلوک حاوی.
- initial: تنظیم مقدار max-height به مقدار پیش‌فرض آن.
- inherit: ارث بری مقدار max-height از والدینش.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
div {
width: 60%;
overflow: auto;
border: 2px solid black;
padding-bottom: 2px;
}
div.a {
max-height: 100px;
}
div.b {
max-height: 70%;
}
div.c {
max-height: inherit;
}
div.d {
max-height: none;
}
</style>
</head>
<body>
<div class="a">
<h2>max-height: 100px and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 100px.</p>
</div>
<div class="b">
<h2>max-height: 70% and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is 70%.</p>
</div>
<div class="c">
<h2>max-height: inherit and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is inherit.</p>
</div>
<div class="d">
<h2>max-height: none and width:80%</h2>
<p class="a"><p>The <i>max-height</i> property allows you to specify maximum height of a box. The value of the max-height property can be various, but this one is none.</p>
</div>
</body>
</html>
در این مثال، چهار div ایجاد شده است که هرکدام با یک مقدار مختلف برای ویژگی max-height تعریف شده‌اند.
ویژگی min-height
ویژگی min-height در CSS برای تنظیم حداقل ارتفاع یک عنصر استفاده می‌شود. این ویژگی کمینه را که یک عنصر می‌تواند داشته باشد، مشخص می‌کند و اطمینان می‌دهد که هیچگاه از آن مقدار کوچکتر نمی‌شود.
مقادیر ممکن برای ویژگی min-height عبارتند از:
- length: تعیین ارتفاع حداقلی با استفاده از واحدهای طول (px، pt، em، in و غیره). مقدار پیش‌فرض.
- percentage (%): مقدار نسبت به درصد بلوک حاوی.
- initial: تنظیم مقدار min-height به مقدار پیش‌فرض آن.
- inherit: ارث بری مقدار min-height از والدینش.
زمانی که محتوا کوچکتر از حداقل ارتفاع است، ارتفاع حداقل اعمال می‌شود. و زمانی که محتوا از ارتفاع حداقل بیشتر است، مقدار min-height تأثیری بر عنصر ندارد.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
div.a {
border: 2px solid red;
min-height: 200px;
width: 80%;
overflow: auto;
margin-bottom:2px;
}
div.b {
border: 2px solid blue;
min-height: 40%;
overflow: auto;
margin-bottom:2px;
}
div.c {
border: 2px solid green;
min-height: 20px;
overflow: auto;
margin-bottom:2px;
}
</style>
</head>
<body>
<div style="border:2px dashed black; margin-bottom:4px;">
<h2>min-height: 0 (default):</h2>
<p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
</div>
<div class="a">
<h2>min-height: 200px and width:80%</h2>
<p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
</div>
<div class="b">
<h2>min-height: 40%</h2>
<p>The <i>min-height</i> property in CSS is used to set the minimum height of an element. It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.</p>
</div>
<div class="c">
<h2>min-height: 20px (smaller than content)</h2>
<p>The min-height is smaller than the content, hence the property <i>min-height</i> has no effect.
The <i>min-height</i> property in CSS is used to set the minimum height of an element.
It specifies the smallest height that an element can have, ensuring that it will never shrink below that value.
</p>
</div>
</body>
</html>
در این مثال، سه div ایجاد شده است که هرکدام با یک مقدار مختلف برای ویژگی min-height تعریف شده‌اند.
ویژگی max-width
ویژگی max-width امکان تعیین عرض حداکثر یک عنصر را فراهم می‌کند. مقدار ویژگی max-width می‌تواند شامل موارد زیر باشد:
- none: هیچ مقدار حداکثر عرض تعیین نشده است. مقدار پیش‌فرض.
- length: تعیین عرض حداکثر به واحدهای طول (px، pt، em، in و غیره).
- percentage (%): تنظیم عرض حداکثر به درصد بلوک حاوی.
- initial: تنظیم مقدار max-width به مقدار پیش‌فرض آن.
- inherit: ارث بری مقدار max-width از والدینش.
اگر محتوا در داخل عنصر بزرگتر از max-width مشخص شده باشد، به طور خودکار ارتفاع عنصر تغییر می‌یابد.
اگر محتوا در داخل عنصر کوچکتر از max-width مشخص شده باشد، ویژگی max-width تأثیری بر روی عنصر ندارد.
مقدار max-width مقدار ویژگی width را نادیده می‌گیرد.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
div.a {
border: 2px solid red;
max-width: 200px;
width: 400px;
overflow: auto;
margin-bottom: 4px;
}
div.b {
border: 2px solid blue;
max-width: 40%;
overflow: auto;
margin-bottom: 4px;
}
div.c {
border: 2px solid red;
max-width: none;
width: 400px;
overflow: auto;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="a">
<h2>max-width: 200px and width:400px</h2>
<p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 200px less than the width which is 400px.</p>
</div>
<div class="b">
<h2>max-width: 40%</h2>
<p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 40%.</p>
</div>
<div class="c">
<h2>max-width: none (default):</h2>
<p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is none.</p>
</div>
</body>
</html>
در این مثال، سه div ایجاد شده است که هرکدام با یک مقدار مختلف برای ویژگی max-width تعریف شده‌اند.
خصوصیت min-width
خصوصیت min-width امکان تعیین عرض حداقل یک عنصر را فراهم می‌کند. مقدار خصوصیت min-width می‌تواند شامل موارد زیر باشد:
- length: تعیین عرض حداقل به واحدهای طول (px، pt، em، in و غیره). مقدار پیش‌فرض 0 است.
- percentage (%): تنظیم عرض حداقل به درصد بلوک حاوی.
- initial: تنظیم مقدار min-width به مقدار پیش‌فرض آن.
- inherit: ارث بری مقدار min-width از والدینش.
اگر محتوای داخل عنصر کوچکتر از min-width مشخص شده باشد، عرض حداقل اعمال می‌شود.
اگر محتوای داخل عنصر بزرگتر از min-width باشد، خصوصیت min-width تأثیری بر روی عنصر ندارد. این از این رو است که مقدار خصوصیت width از min-width کوچکتر نمی‌شود.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
.box1 {
min-width: 300px;
background-color: yellow;
padding: 20px;
margin-bottom: 5px;
}
.box2 {
min-width: 30%;
background-color: lightgrey;
padding: 20px;
display: inline-block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="box1">This box has a minimum width of 300px</div>
<div class="box2">This box has a minimum width of 30%.</div>
<div class="box2">
This box has a minimum width of 30%. But the content is larger than the min-width.
Hence the value of min-width has no effect. This is a dimensional property which can styled using CSS.
</div>
</body>
</html>
در این مثال، دو div ایجاد شده است که هرکدام با یک مقدار مختلف برای ویژگی min-width تعریف شده‌اند.
خلاصه
در اینجا تمام ویژگی‌های مرتبط با ابعاد عناصر در جدول زیر آورده شده است:
| ویژگی | توضیح |
|---|---|
| height | ارتفاع یک عنصر را تعیین می‌کند. |
| width | عرض یک عنصر را تعیین می‌کند. |
| line-height | ارتفاع خط یک متن را تعیین می‌کند. |
| max-height | حداکثر ارتفاع یک عنصر را تعیین می‌کند. |
| min-height | حداقل ارتفاع یک عنصر را تعیین می‌کند. |
| max-width | حداکثر عرض یک عنصر را تعیین می‌کند. |
| min-width | حداقل عرض یک عنصر را تعیین می‌کند. |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام