خاصية Width
آخر تحديث: 2026-09-13
width خاصية Width
تضبط خاصية width عرض منطقة محتوى العنصر وهي إحدى أكثر خصائص الأبعاد استخدامًا في نموذج الصندوق (box model) في CSS. تؤثر هذه الخاصية فقط على العناصر غير المستبدلة (non-replaced elements)، ويسمح قيمتها الافتراضية auto للمتصفح بحساب العرض تلقائيًا بناءً على الكتلة الحاضنة (containing block). في التخطيطات الفعلية، يُدمج width غالبًا مع max-width و min-width لبناء تصاميم متجاوبة.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | non-replaced |
| نوع الحركة | length |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>);⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | كلمة مفتاحية | يحسب المتصفح العرض تلقائيًا. |
<length> | النوع | قيمة طول ثابتة، مثل 16px أو 2em. |
<percentage> | النوع | نسبة مئوية بالنسبة لعرض الكتلة الحاضنة. |
max-content | min-content | fit-content | كلمة مفتاحية | كلمات مفتاحية تحسب العرض من المحتوى. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： مع القيمة الافتراضية width:auto، يملأ العنصر على مستوى الكتلة عرض الحاوية الأصل بالكامل، بينما يتقلص العنصر على مستوى السطر ليتناسب مع محتواه.
تحذير： لا يتضمن width الحشو (padding) أو الحدود (border) ما لم تُحدد box-sizing:border-box.
❓ الأسئلة الشائعة
Qما الفرق بين width:100% و width:auto؟
Aيجعل width:100% منطقة المحتوى مساوية تمامًا لعرض الحاوية الأصل، لذا تؤدي إضافة padding أو border إلى تجاوز العرض الكلي للعنصر عرض الأصل. أما width:auto فإنه يطرح padding و border تلقائيًا، مما يسمح للعنصر بملء الأصل بدقة. باختصار: يثبّت 100% منطقة المحتوى بينما يتكيّف auto مع العرض الكلي، والأكثر وضوحًا للفرق هو على الصناديق التي تحتوي على padding.
Qكيف أجعل عرض العنصر يتكيف مع محتواه؟
Aاستخدم كلمات مفتاحية مبنية على المحتوى. يضبط width:max-content العرض لأقصى اتساع يمكن أن يصل إليه المحتوى دون التفاف؛ ويستخدم width:min-content عرض أطول كلمة أو أصغر وحدة؛ ويقع width:fit-content بينهما، فيأخذ حجم المحتوى عند توفر المساحة ويتقلص عند عدم توفرها. لاحظ أن هذه الكلمات المفتاحية تتطلب دعمًا من المتصفح؛ فبعض المتصفحات المحمولة القديمة تحتاج إلى بادئات أو بدائل احتياطية.
Qإلى ماذا تُنسب النسبة المئوية لـ width؟
Aتُحسب النسبة المئوية بالنسبة لعرض منطقة محتوى الكتلة الحاضنة. بالنسبة للعناصر في التدفق العادي، تكون الكتلة الحاضنة هي منطقة محتوى الأصل؛ وبالنسبة للعناصر ذات الموضع المطلق، تكون هي padding box لأقرب سلف ذي موضع؛ وبالنسبة للعناصر الثابتة، تكون هي viewport. لذلك يشير width:100% للعنصر الابن إلى منطقة محتوى الأصل، وليس إلى حجمه الخارجي الكامل.
Qكيف أجعل الصور متجاوبة دون تجاوز حاويتها؟
Aالنمط القياسي هو img { max-width:100%; height:auto; }. يُبقي max-width:100% الصورة تتغيّر حجمها بشكل متناسب كلما ضاق الحاوية فلا تتجاوزها أبدًا، بينما يعيد height:auto حساب الارتفاع من نسبة العرض إلى الارتفاع الأصلية لتجنب التشوّه. هذا أكثر أمانًا من استخدام width:100% وحده، الذي يمدّ الصور الصغيرة قسرًا ويجعلها ضبابية. طبّق هذا النمط على كل عنصر وسائط حتى تُحجّم الصور والفيديو بأمان داخل أي تخطيط.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
شرح نموذج الصندوق CSS
افهم كيف يرتبط width مع padding و border.
خاصية max-width
حدد الحد الأقصى لعرض العنصر للتخطيطات المتجاوبة.
