21- استخدام width, max-width و margin: auto;

كما ذكرنا في الفصل السابق، يأخذ عنصر مستوى الكتلة دائمًا كامل العرض المتاح (يمتد إلى أقصى يسار ويمين قدر الإمكان).

سيؤدي تعيين العرض (width) لعنصر مستوى كتلة إلى منع امتداده إلى حواف الحاوية الخاصة به. بعد ذلك، يمكنك تعيين الحواشي (margin) إلى auto لمحاذاة العنصر أفقيًا داخل حاوية الخاص به. سيشغل العنصر العرض المحدد، وسيتم تقسيم المساحة المتبقية بالتساوي بين الحافيتين:

يحتوي عنصر <div> هذا على عرض يبلغ 500 بكسل، وتم تعيين الحافة إلى auto.

ملاحظة: تحدث المشكلة مع عنصر <div> السابق عندما يكون نافذة المتصفح أصغر من عرض العنصر. ثم يضيف المتصفح شريط تمرير أفقي إلى الصفحة.

سيؤدي استخدام max-width بدلاً من ذلك، في هذه الحالة، إلى تحسين معالجة المتصفح للنوافذ الصغيرة. وهذا مهم عند جعل موقع ما قابل للاستخدام على الأجهزة الصغيرة:

يحتوي عنصر <div> هذا على حد أقصى للعرض يبلغ 500 بكسل، وتم تعيين الحافة إلى auto.

نصيحة: قم بتغيير حجم نافذة المتصفح إلى أقل من 500 بكسل، لرؤية الفرق بين عنصري div!

فيما يلي مثال على عنصري div السابقين:

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

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