استفاده از width، max-width و margin: auto;
همانطور که در فصل قبل توضیح دادیم، المان بلاک همواره در خط جدید شروع میشود و تمام سطح موجود را اشغال میکند (تا جایی که امکان دارد به سمت چپ و راست صفحه میرود).
با کمک پراپرتی width میتوانیم به المان های بلاک این اجازه را ندهیم که به سمت چپ و راست صفحه بچسبد. با استفاده از margin: auto; آن المان را بصورت افقی وسط چین میکنید. با این روش المان مورد نظر عرض مشخصی خواهد داشت و فضای باقی مانده بصورت مساوی تقسیم میشود.
المان <div> عرض 500px, و مارجین auto دارد.
در مثال بالا مشکلی که المان div با آن مواجه میشود زمانی رخ میدهد که پنجره مرورگر کوچکتر از عرض المان شود (500px). در این زمان مرورگر اسکرول افقی به صفحه میدهد.
با استفاده از پراپرتی max-width میتوان رفتار مرورگر در صفحه نمایش های کوچک هندل کرد. این موضوع در زمانی که سایتی برای صفحه نمایش کوچک طراحی میکنید از اهمیت برخوردار خواهد بود.
المان <div> حداکثر عرض 500px, و مارجین auto دارد.