الارتفاع والعرض في CSS
تؤطّر الصندوق وتدوّره وتعطيه فراغاً خارجياً وداخلياً. المهارة التالية: قرر حجم الصندوق. width وheight يضبطان حجم صندوق المحتوى — كم يكون عرض النواة وارتفاعها.
ماذا يفعل width وheight؟
width يتحكم في الحجم الأفقي. height يتحكم في الحجم الرأسي. القيم الشائعة تستخدم أطوالاً مثل px أو أحجاماً نسبية مثل %. إن تركتهما، كثير من العناصر تحسب حجمها من محتواها وسياق التخطيط.
حجم ثابت بالبكسل
بداية يومية واضحة: أعطِ لوحة عرضاً دقيقاً (وارتفاعاً اختيارياً) بالبكسل.
عرض ثابت بالبكسل
css.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}العرض والارتفاع معاً
حين يحتاج التصميم مستطيلاً محدداً — إطار مصغّر، بلاطة، موضع وسائط — اضبط كليهما.
عرض وارتفاع على بلاطة
css.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}عرض بالنسبة المئوية
عرض % عادة نسبة إلى عرض الكتلة الحاوية (غالباً الأب). width: 50% تعني «نحو نصف عرض أبي» لا نصف الشاشة بقدرة سحرية.
نصف عرض الأب
css.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}أدوات التحجيم بنظرة
إلى جانب العرض والارتفاع البسيطين، يمنحك CSS حواجز.
📊 أدوات العرض والارتفاع
| الأداة | الدور | ملاحظة يومية |
|---|---|---|
width / height |
الحجم المفضّل لصندوق المحتوى | ابدأ هنا للأحجام الثابتة أو المرنة |
min-width / min-height |
لا تصغُر دون هذا | أزرار أو أشرطة جانبية قابلة للاستخدام |
max-width / max-height |
لا تكبر فوق هذا | لطّف صوراً ضخمة أو نصوصاً عريضة |
auto |
دع المتصفح يحسب | الارتفاع الافتراضي غالباً يتبع المحتوى |
% |
نسبة إلى الكتلة الحاوية | % العرض شائع؛ % الارتفاع يحتاج ارتفاع أب معرّفاً |
min-width كأرضية
مفيد حين يجب أن يبقى الصندوق قابلاً للاستخدام حتى مع ضغط التخطيط.
أرضية الحد الأدنى للعرض
css.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}max-width كسقف
عادة كلاسيكية لنص مقروء أو صور لا تمتد بلا نهاية على الشاشات الكبيرة.
سقف الحد الأقصى للعرض
css.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}الارتفاع غالباً يبقى auto
لكتل النص دع الارتفاع ينمو مع المحتوى. ارتفاع ثابت صغير جداً قد يقص النص ما لم تخطط لـ overflow (درس لاحق).
ارتفاع auto يتبع المحتوى
css.article {
width: 100%;
max-width: 36rem;
height: auto; /* ينمو مع الفقرات */
padding: 1rem;
border: 1px solid #cbd5e1;
}جرّبها بنفسك
- لوحة بـ
width: 320pxوحشو/حد مرئي. - بلاطة 160×120 بالعرض والارتفاع معاً.
- ابنٍ بـ
width: 50%داخل أب أعرض وغيّر حجم الأب. - أضف
min-width: 12remلزر وصغّر منفذ العرض. - أعطِ كتلة نص
max-width: 40remوheight: auto— ثم جرّب ارتفاعاً ثابتاً صغيراً جداً ولاحظ خطر القص.
أخطاء شائعة
- استخدام
height: 50%وأبوّك بلا ارتفاع صريح (النسبة قد لا تفعل ما تتوقع) - قفل
heightقصير على صندوق نص والتعجب من قص المحتوى - نسيان
max-widthعلى صور كبيرة أو أسطر نص طويلة - خلط width (حجم صندوق المحتوى) مع padding (الوسادة الداخلية)
- افتراض أن
widthيشمل دائماً الحد والحشو — يعتمد علىbox-sizing(قريباً)
ملخص
widthوheightيحددان حجم صندوق المحتوى- استخدم
pxللثابت و%لعرض مرن نسبة إلى الأب min-*وmax-*يضعان أرضية وسقفاً- فضّل
height: autoلمحتوى نص ينمو - ارتفاع النسبة يحتاج أباً بارتفاع معرّف
- حساب الصندوق الكامل يأتي في دروس نموذج الصندوق التالية
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى