cssblog.ir logo
P

width

تعیین عرض عناصر با مشخصه width

مشخصه عرض همانطور که از نامش پیداست عرض عناصر را کنترل می‌کند و با مقادیر مختلفی می‌توان آن را مقداردهی نمود

مشخصه width تعیین می کند که عنصر چه مقدار عرض داشته باشد و می توان از تمام مقادیر مجاز برای تعیین این مشخصه استفاده نمود.

مثال: ساده ترین روش استفاده از واحدهای پیکسلی می باشد. مانند: ۲۰۰ پیکسل 

مثال: واحدهای درصدی. در این حالت عرض به نسبت فضای موجود محاسبه می شود. 

 مثال: استفاده از واحدهای نسبی em و rem باعث می شوند تا عرض به نسبت سایز فونت پایه، محاسبه شود.

مثال: ارث بری عرض از والد - inherit 

 مشخصه width دقیقا چکار می کند؟

بطور دقیق‌تر می‌توان گفت که این مشخصه عرض فضای مربوط به محتوا (content area) را تعیین می‌کند و این یعنی برخلاف انتظار، مشخصه width لزوما تعیین کننده عرض نهایی (محاسبه شده) نخواهد بود چراکه علاوه بر محتوا، قسمت های دیگری مانند padding و margin و border نیز وجود دارد. یعنی نکته ای که باید همیشه مدنظر قرار داده شود این است که برای مثال اگر عرض عنصری برابر ۱۰۰ پیکسل تعیین شود و از سمت چپ و راست ۱۰ پیکسل padding داشته باشد، عرض نهایی آن ۱۲۰ پیکسل خواهد بود. البته این توضیحات با فرض border-box پیشفرض است که درباره این موضوع می تواند در مطالب مربوط به «مدل جعبه» و «مشخصه box-sizing» بخوانید.

کلمات کلیدی

min-content

این کلمه کلیدی باعث می شود تا عرض عنصر به اندازه محتوای آن تعیین شود و به اندازه ای باشد که محتوا را دربر گیرد به شرطیکه امکان soft wrapping (شکستن متن در هنگام نبودن فضا) به عنصر داده شده باشد. (مشخصه white-space) البته این اتفاق پس از float نیز مشاهده می شود اما تفاوتی که این مقدار با روش استفاده از float دارد این است که پس از float محدودیت هایی برای ما ایجاد می شود و دیگر نمی توانیم برخی استایل ها (مانند margin: 0 auto برای وسطچین کردن) را استفاده کنیم اما از آنجائیکه مقدار min-content تاثیری در موقعیت عنصر نمی‌گذارد، دست ما برای نوشتن سایر استایل ها باز خواهد بود.

max-content

این کلمه کلیدی به معنی «حداقل عرضی است که یک عنصر باید داشته باشد تا بتواند محتوای خود را دربر بگیرد» البته این رفتار بستگی به wrapping (شکستن) متن ها دارد که که وضعیتی برای آ‌نها تعیین شده باشد.

fit-content

این مقدار رفتاری شبیه به min-content دارد و باعث می شود که عرض عنصر به اندازه ای باشد که محتوا را دربر بگیرد و در مواقعی بسیار مناسب است که عرض محتوا مشخص نیست یا داینامیک است.

برای مثال اگر بخواهیم یک pagination را بصورت وسط چین در صفحه قرار دهیم و خود pagination پس زمینه داشته باشد معمولا چنین استایلی را می‌نویسیم:

 همانطور که مشاهده می کنید در مثال فوق والد text-align: center گرفته است و بدلیل اینکه آیتم های لیست به شکل inline-block هستند، در وسط آن قرار می گیرد اما مشکل اصلی پس زمینه آنهاست که همانطور که مشاهده می‌کنید بدلیل بلوکی بودن (BLOCK) تگ <‌ul‌> در عنصر اول، کل آن فضا به رنگ پس‌زمینه درآمده است. اما در عنصر دوم، با استفاده از مقدار fit-content می‌توان به راحتی این مشکل را حل کرد.

تاثیرپذیری از max-width و min-width

دقت داشته باشید که اگر از مشخصه width در کنار مشخصه های max-width (حداکثر عرض) و min-width (حداقل عرض)‌ استفاده کنید، مقادیر داده شده به این مشخصه ها باید از منطق خاصی پیروی کند تا نتیجه دلخواه حاصل شود. برای مثال دو نمونه کاربرد منطقی این مشخصه ها در کنار یکدیگر می تواند این چنین باشد:

مثال: عرض پیام باید ۷۰٪ فضایی که در آن قرار دارد باشد اما همچنین باید حداقل ۳۰۰ پیکسل باشد.

 مثال: به عنصری عرض پیکسلی مانند 400px داده شده باشد اما جدا از آن، بخواهیم کنترل کنیم که هیچوقت این عنصر از والدی خود (مثلا در سایزهای کوچکتر) بزرگتر نخواهد شد. که چنین کاری معمولا برای تصاویر داخل مقالات کاربردی خواهد بود.

می‌توانید اطلاعات بیشتر درباره مشخصه های max-width و min-width را مطالب مروبط به آنان کسب کنید.

width را برای چه عناصری می توان تعیین نمود ؟

برای تمام عناصر بغیر از عناصر inline و ردیف های جدول (<‌tr‌>) و گروه‌های ردیف‌ها (مانند <‌thead‌> و <‌tfoot‌> و <‌tbody‌> ) می توان استفاده نمود.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند