CSS - Max-width العرض الأقصى
CSS - الخاصية max-width
🔸 تُستخدم خاصية max-width لتحديد العرض الأقصى (Maximum Width) للعنصر. بمعنى أنه يمكن للعنصر التمدد حتى هذا الحد فقط، وإذا تجاوز المحتوى هذا الحد، فسيتم لفّه أو تقليصه حسب الإعدادات.
✅ الفرق بين width و max-width
width: يُحدد عرضًا ثابتًا للعنصر، حتى لو كان المحتوى أقل أو أكثر.max-width: يسمح للعنصر بالتوسع، لكن لا يتجاوز الحد الأقصى المحدد.
🧪 مثال بدون max-width
<!DOCTYPE html>
<html>
<head>
<style>
.no-max {
width: 500px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="no-max">
هذا الصندوق له عرض ثابت 500px، ولن يتغير مهما كانت شاشة المستخدم صغيرة.
</div>
</body>
</html>
🧪 مثال باستخدام max-width
<!DOCTYPE html>
<html>
<head>
<style>
.with-max {
max-width: 500px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="with-max">
هذا الصندوق له حد أقصى 500px، لكنه سيصغر تلقائيًا على الشاشات الصغيرة.
</div>
</body>
</html>
📌 الاستخدام الشائع مع التصميم المتجاوب
عند إنشاء مواقع متجاوبة (Responsive)، نستخدم max-width بدلًا من width للسماح للعناصر بالتكيّف مع أحجام الشاشات المختلفة.
💡 ملاحظات مهمة
- إذا تم تحديد
widthوmax-widthمعًا، فإنmax-widthهو الذي يتم تطبيقه. max-widthيقبل القيم بوحدات مثلpxأو%أوem.- يفضل استخدام
max-width: 100%;للصور لتكون مرنة داخل الحاوية.
تعليقات
إرسال تعليق