شرح width و max-width في CSS | أساسيات CSS


كما ذكرنا في الدرس السابق، يشغل عنصر block دائمًا كل المساحة في السطر (يمتد إلى أقصى اليمين واليسار قدر الإمكان). في هذا الدرس، سنتعامل مع سمات width و max-width ....


استخدام سمات width و max-width

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

يشغل العنصر في هذه الحالة قدرًا معينًا من المساحة ويتم تقسيم المساحة المتبقية بالتساوي بين  margin على اليمين واليسار:


يحتوي عنصر <div> هذا على قيمة 450 بكسل لسمة width ويتم تعيين قيمة margin له على auto .


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

 

يحتوي عنصر <div> هذا على قيمة 450 بكسل للسمة max-width ويتم تعيين قيمة margin  الخاصة به على auto.

 

يمكنك رؤية الفرق بين عناصر <div> أعلاه من خلال تقليص شاشة المتصفح.

في المثال التالي، يمكنك مشاهدة الفرق بين سمات width و max-width عند التكبير والتصغير: 

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

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



كلمات مفتاحية: