ویژگی width در CSS تنظیم می‌کند عرض محتوای یک عنصر را. در صورتی که مقدار box-sizing به border-box تنظیم شده باشد، ویژگی width عرض منطقه حاشیه را تعیین می‌کند.
مقدار مشخص شده توسط ویژگی width در محدوده مقادیر تعیین شده توسط ویژگی‌های min-width و max-width باقی می‌ماند.
مقادیر ممکن:
- <length>: یک مقدار طول مشخص مانند پیکسل (px)، سانتیمتر (cm)، اینچ (in) و غیره.
- <percentage>: یک درصد از عرض عنصر محیطی.
- auto: مرورگر عرض را بر اساس محتوا به صورت خودکار محاسبه می‌کند. این مقدار پیش‌فرض است.
- max-content: عرض ترجیحی بومی را تعیین می‌کند.
- min-content: عرض حداقل بومی را تعیین می‌کند.
- fit-content: محتوا را در فضای موجود جا می‌دهد، اما هرگز بیشتر از max-content نمی‌شود.
- fit-content: فرمول fit-content استفاده می‌شود، یعنی min(max-content، max(min-content، <length-percentage>)).
اعمال به: تمام عناصر HTML به جز عناصر متنی غیر جایگزین، ردیف‌های جدول و گروه‌های ردیف.
سینتکس DOM:
object.style.width = "100px";این ویژگی به شما امکان می‌دهد تا عرض عنصر را به طور دقیق تنظیم کرده و آن را به شکلی مناسب برای طراحی و نمایش محتوا تنظیم کنید.
Length Unit
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه تعیین عرض برای یک عنصر div با استفاده از واحدهای طول را نشان می‌دهد.
- در این کد، دو عنصر div با کلاس‌های مختلف (a و b) تعریف شده‌اند.
- در CSS، به هر دو عنصر div اعمالی انجام شده است. تمام عناصر div دارای حاشیه‌ای با ضخامت 1 پیکسل و رنگ مشخص شده (سیاه) هستند، و همچنین با اعمال یک فاصله‌ی پایینی به اندازه‌ی 5 پیکسل از بین آنها فاصله ایجاد شده است.
- برای هر یک از عناصر div با کلاس‌های a و b، ویژگی width با مقادیر مختلف تنظیم شده است. به عنوان مثال، عنصر div با کلاس a دارای عرض 100 پیکسل است، در حالی که عنصر div با کلاس b دارای عرض 5em است.
با اجرای این کد، مشاهده می‌شود که عرض هر عنصر div با توجه به مقادیر تعیین شده در CSS تغییر می‌کند. این واحدهای طول، مانند پیکسل و em، به طور دقیق تعیین می‌کنند که عرض عنصر چقدر باشد، و از طریق این واحدها می‌توانیم طراحی و نمایش عناصر را با دقت بیشتری کنترل کنیم.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.a {
width: 100px;
background-color: rgb(230, 230, 203);
}
div.b {
width: 5em;
background-color: rgb(230, 230, 203);
}
</style>
</head>
<body>
<div class="a">This div element has a width of 100px.</div>
<div class="b">This div element has a width of 5em.</div>
</body>
</html>Percentage Value
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه تعیین عرض برای یک عنصر div با استفاده از مقادیر درصدی را نشان می‌دهد.
- در کد ارائه شده، دو عنصر div با کلاس‌های مختلف (a و b) تعریف شده‌اند.
- در CSS، به هر دو عنصر div اعمالی انجام شده است. هر دو عنصر div دارای حاشیه‌ای با ضخامت 1 پیکسل و رنگ مشخص شده (سیاه) هستند، و همچنین با اعمال یک فاصله‌ی پایینی به اندازه‌ی 5 پیکسل از بین آنها فاصله ایجاد شده است.
- برای هر یک از عناصر div با کلاس‌های a و b، ویژگی width با مقادیر درصدی مختلف تنظیم شده است. به عنوان مثال، عنصر div با کلاس a دارای عرضی برابر با 120 درصد عرض عنصر محیطی خود است، در حالی که عنصر div با کلاس b دارای عرضی برابر با 20 درصد عرض عنصر محیطی خود است.
با اجرای این کد، مشاهده می‌شود که عرض هر عنصر div با توجه به مقادیر تعیین شده در CSS و درصد معین شده، تغییر می‌کند. استفاده از مقادیر درصدی به ما امکان می‌دهد تا عرض عناصر را نسبت به عرض عنصر محیطی خود تعیین کنیم و از این طریق به طراحی و نمایش اجزای وب انعطاف بیشتری بدهیم.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.a {
width: 120%;
background-color: yellow;
}
div.b {
width: 20%;
background-color: rgb(236, 190, 190);
}
</style>
</head>
<body>
<div class="a">This div element has a width of 120%.</div>
<div class="b">This div element has a width of 20%.</div>
</body>
</html>Auto
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه تعیین عرض برای یک عنصر div به عنوان auto را نشان می‌دهد.
- در کد ارائه شده، یک عنصر div با کلاس auto تعریف شده است.
- در CSS، به عنصر div با کلاس auto اعمالی انجام شده است. این عنصر دارای یک حاشیه با ضخامت 1 پیکسل و رنگ مشخص شده (سیاه) است، و همچنین با پس‌زمینه رنگ زرد از اعمالی استفاده می‌کند.
- ویژگی width برای عنصر div با مقدار auto تنظیم شده است، که به مرورگر اجازه می‌دهد عرض عنصر به طور خودکار بر اساس محتوا محاسبه شود.
با اجرای این کد، مشاهده می‌شود که عرض عنصر div با توجه به محتوای داخلی خود به طور خودکار تعیین می‌شود. این به این معناست که عرض عنصر div به اندازه کافی برای نمایش محتوا داخلی خود تنظیم می‌شود، بدون این که نیاز به تعیین یک عرض ثابت داشته باشیم. استفاده از مقدار auto به ما امکان می‌دهد که عرض عنصر را به طور دقیق و انعطاف‌پذیر تر بر اساس محتوا تنظیم کنیم.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.auto {
width: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="auto">This div element has a width set as auto.</div>
</body>
</html>Using max-content and min-content
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نشان می‌دهد چگونه می‌توان عرض یک عنصر div را برابر با مقادیر max-content و min-content قرار داد.
- در کد ارائه شده، دو عنصر div با کلاس‌های مختلف (c و d) تعریف شده‌اند.
- در CSS، به هر دو عنصر div اعمالی انجام شده است. هر دو عنصر div دارای یک حاشیه با ضخامت 1 پیکسل و رنگ مشخص شده (سیاه) هستند، و همچنین با اعمال یک فاصله‌ی پایینی به اندازه‌ی 5 پیکسل از بین آنها فاصله ایجاد شده است.
- برای هر یک از عناصر div با کلاس‌های c و d، ویژگی width با مقادیر max-content و min-content تنظیم شده است.
با اجرای این کد، مشاهده می‌شود که عرض هر دو عنصر div با توجه به مقادیر تعیین شده در CSS و برابر با مقادیر max-content و min-content قرار می‌گیرد. این مقادیر بر اساس محتوای داخلی عنصر div تعیین می‌شوند. با استفاده از این روش، می‌توانیم عرض عناصر را به طور دقیق و مطابق با محتوای آنها تنظیم کنیم، به طوری که عرض آنها مناسب و بهینه باشد.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.c {
width: max-content;
background-color: bisque;
}
div.d {
width: min-content;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="c">This div element has a width as max-content.</div>
<div class="d">This div element has a width of min-content.</div>
</body>
</html>Image
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه تعیین عرض برای یک تصویر را نشان می‌دهد.
- در کد ارائه شده، یک تصویر با استفاده از تگ
<img>قرار داده شده است. - تصویر دارای یک کلاس با نام demoImg است که در CSS استفاده می‌شود.
- در CSS، به تصویر اعمالی انجام شده است. تصویر دارای حاشیه با ضخامت 1 پیکسل و رنگ مشخص شده (سیاه) است، و همچنین با اعمال یک فاصله‌ی بالایی به اندازه‌ی 15 پیکسل از بالای آن و یک فاصله‌ی راستی به اندازه‌ی 0.5 اینچ، تنظیمات دیگری اعمال شده‌اند.
- ویژگی width برای تصویر با مقدار 300 پیکسل تنظیم شده است.
با اجرای این کد، تصویر با عرض 300 پیکسل نمایش داده می‌شود. استفاده از ویژگی width به ما امکان می‌دهد تا عرض تصویر را به طور دقیق تعیین کرده و آن را به شکلی مطلوب در صفحه نمایش دهیم.
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
.demoImg {
margin-top: 15px;
width: 300px;
margin-right: 0.5in;
}
</style>
</head>
<body>
<img class="demoImg" src="images/scancode.png" alt="image-width">
</body>
</html>Using fit-content
در این بخش، یک نمونه کد HTML و CSS ارائه شده است که نحوه استفاده از مقدار fit-content برای تنظیم عرض یک لیست را نشان می‌دهد.
- در کد ارائه شده، یک لیست با استفاده از تگ
<ul>و چند آیتم لیست با استفاده از تگ<li>قرار داده شده است. - در CSS، به لیست و آیتم‌های لیست اعمالی انجام شده است. لیست دارای پس‌زمینه رنگ بژ و حاشیه با ضخامت 2 پیکسل و رنگ سیاه است، همچنین با اعمال یک فاصله‌ی پایینی و بالایی به اندازه‌ی 1.5em، تنظیمات دیگری اعمال شده‌اند.
- هر آیتم لیست دارای نوع نمایش inline-flex است، پس‌زمینه‌ی آن نارنجی و حاشیه با ضخامت 2 پیکسل و رنگ سیاه است، همچنین با اعمال یک فاصله‌ی داخلی به اندازه‌ی 0.5em، تنظیمات دیگری اعمال شده‌اند.
- ویژگی width برای لیست با مقدار fit-content تنظیم شده است.
با استفاده از مقدار fit-content برای ویژگی width، عرض لیست به گونه‌ای تنظیم می‌شود که به اندازه‌ی حداقل ممکن برای جایگذاری آیتم‌های داخلی آن مناسب باشد. به عبارت دیگر، عرض لیست با توجه به محتوا داخلی خود مشخص می‌شود و بهینه می‌شود. با اجرای این کد، عرض لیست به اندازه‌ی لازم برای جایگذاری همه‌ی آیتم‌ها تنظیم می‌شود و از این طریق از فضای اضافی در صفحه جلوگیری می‌شود.
<html>
<head>
<style>
ul {
background-color: beige;
width: fit-content;
padding: 1.5em;
border: 2px solid black;
}
li {
display: inline-flex;
background-color: orange;
border: 2px solid black;
padding: 0.5em;
}
</style>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
</html>Related Properties
در زیر لیست ویژگی‌های مرتبط با CSS در مورد عرض آمده است:
۱. max-width: این ویژگی یک حد بالایی برای عرض یک عنصر تعیین می‌کند. به عبارت دیگر، با استفاده از این ویژگی می‌توانید حداکثر عرض ممکن برای یک عنصر را تعیین کنید.
۲. min-width: این ویژگی یک حد پایینی برای عرض یک عنصر تعیین می‌کند. به عبارت دیگر، این ویژگی به شما اجازه می‌دهد حداقل عرض ممکن برای یک عنصر را تعیین کنید.
۳. min-content: با استفاده از این ویژگی، حداقل عرض محتوایی درون یک عنصر تعیین می‌شود. به عبارت دیگر، این ویژگی مشخص می‌کند که عنصر باید حداقل چه عرضی را برای نمایش محتوای داخلی خود داشته باشد.
۴. max-content: این ویژگی حداکثر عرض محتوایی درون یک عنصر را تعیین می‌کند. به عبارت دیگر، عرض عنصر به اندازه محتوای داخلی‌اش تغییر می‌کند، اما از این ویژگی می‌توان برای تعیین حداکثر محتوایی که عنصر می‌تواند داشته باشد استفاده کرد.
۵. fit-content: این ویژگی، ابعاد عنصر را به محتوای داخلی آن وابسته می‌کند، به طوری که عرض عنصر به اندازه محتوا تغییر می‌یابد. این به معنی این است که عرض عنصر به طور خودکار تنظیم می‌شود به گونه‌ای که همه محتوای داخلی آن قابل نمایش باشد.
۶. fit-content(): این تابع یک ابعاد داده شده را بر اساس فرمول min(maximum size, max(minimum size, argument)) محدود می‌کند. به طور خلاصه، این تابع حداکثر و حداقل اندازه ممکن را برای عنصر تعیین می‌کند، به گونه‌ای که ابعاد داده شده داخل محدوده مشخص شده قرار گیرد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام