همان‌طور که در بخش قبلی توضیح داده شد، یک عنصر بلوکی همیشه تمام عرض موجود را اشغال می‌کند و از چپ تا راست کشیده می‌شود.
تنظیم عرض یک عنصر بلوکی باعث می‌شود که از کشیده شدن به لبه‌های کانتینر خود جلوگیری کند. سپس می‌توانید حاشیه‌ها را روی auto تنظیم کنید تا عنصر به صورت افقی در کانتینر خود مرکز قرار گیرد. عنصر عرض مشخص‌شده را اشغال می‌کند و فضای باقیمانده به طور مساوی بین دو حاشیه تقسیم می‌شود:
مثال:
این عنصر <div> عرضی برابر با 500 پیکسل دارد و حاشیه‌ها به صورت خودکار تنظیم شده‌اند:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}مشکل استفاده از عرض ثابت
مشکل این است که وقتی اندازه پنجره مرورگر کمتر از عرض عنصر می‌شود، مرورگر یک نوار اسکرول افقی به صفحه اضافه می‌کند.
استفاده از max-width
استفاده از خاصیت max-width به جای width در این شرایط، باعث بهبود مدیریت مرورگر در پنجره‌های کوچکتر می‌شود. این روش به خصوص زمانی مهم است که سایت را برای دستگاه‌های کوچک قابل استفاده کنید.
این عنصر <div> حداکثر عرضی برابر با 500 پیکسل دارد و حاشیه‌ها نیز به صورت خودکار تنظیم شده‌اند:
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}نکته:
مرورگر خود را به عرض کمتر از 500 پیکسل تغییر دهید تا تفاوت بین دو <div> بالا را مشاهده کنید! max-width باعث می‌شود که عنصر در پنجره‌های کوچکتر به اندازه پنجره کوچک شود و نوار اسکرول افقی ایجاد نشود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام