استفاده از width ،‌ max-width و ;margin:auto

همانطور كه در درس قبل گفته شد ،‌ عنصر سطح بلوك هميشه تمام عرض در دسترس را پر مي كند.
تنظيم width يك عنصر سطح بلوك از عريض شدن آن و ادامه آن تا انتهاي محدوده محتوا ، جلوگيري مي كند. پس مي توان margin را بر روي auto تنظيم كرد تا عنصر مورد نظر در وسط محدوده محتوا قرار گيرد. عنصر عرض مشخص شده را مي گيرد و باقي مانده از كل عرض حداكثر بصورت يكسان براي هر طرف تقسيم مي شود.

نكته ! مشكل عنصری که فقط عرض عادی آن را تعیین کرده ایم اين است كه وقتي صفحه نمايش را به اندازه اي كمتر از عرض عنصر تغيير دهيم ،‌مرورگر يك نوار اسكرول افقي به صفحه اضافه مي كند. براي حل اين مشكل از max-width استفاده ميكنيم تا مرورگر در صفحات كوچك محتوا را به خوبي نمايش دهد. اين نكته براي مواردي كه مي خواهيم وب سايت را براي دستگاه هاي كوچكتر نيز طراحي كنيم ،‌مهم است.

مثال :

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}