تعیین پهنای المان در CSS – ویژگی width

در CSS از ویژگی width برای تعیین پهنا یا عرض المان های HTML استفاده می‌شود. این ویژگی در کنار ویژگی height برای تعیین ابعاد (پهنا و ارتفاع) المان به کار می‌رود.

نحوه تعیین پهنا یا عرض المان های مختلف با کمک ویژگی width

برای تعیین پهنای المان های مختلف با کمک ویژگی width در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای این ویژگی مشخص کنید:

div.demo {
  width: 250px;
  border: 1px solid black;
}

با توجه به قانون CSS فوق، مقدار 250px برای ویژگی width باعث می‌شود پهنا یا عرض تمام المان های <div> که دارای کلاس demo هستند برابر با 250 پیکسل شود. تصویر زیر نتیجه این قانون را روی یک المان نمونه همراه با خط مرزی پیرامون المان نمایش می‌دهد:

چند نکته در مورد تعیین پهنای المان در CSS

• به صورت پیشفرض، مقدار ویژگی width پهنای بخش محتوای المان را مشخص می‌کند. اما اگر ویژگی box-sizing روی border-box تنظیم شده باشد این مقدار padding و border المان را هم شامل می‌شود.
• ویژگی های min-width و max-width می‌توانند پهنای المان را محدود کنند و مقدار ویژگی width را اورراید می‌کنند. برای مثال اگر مقدار ویژگی width برابر 200px و مقدار ویژگی min-width برابر با 250px باشد پهنای المان 250 پیکسل خواهد بود.

انواع مقادیر متداول برای ویژگی width

• auto: این مقدار، مقدار پیشفرض برای ویژگی width است و محاسبه و تعیین پهنای المان را برعهده مرورگر می‌گذارد.
• طول: درج مقدار با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت)، em و … برای ویژگی width یکی از روش‌های رایج برای تعیین پهنای المان براساس طول است. برای مثال مقدار 250px و 5cm.
• درصد: درج مقدار برحسب درصد برای ویژگی width پهنای المان را به صورت درصدی از پهنای بلوکی که المان را دربرگرفته مشخص می‌کند. برای مثال مقدار 50%.

بازگشت به فهرست مجموعه آموزشی CSS