شرح صفوف ومحتوى الفقرة
ماذا يحدث لو اجتمعت خصائص الارتفاع الثلاث في تعارض مباشر على عنصر واحد، كأن تكتب معاً height: 100px و max-height: 140px و min-height: 200px؟ تنص مواصفة W3C القياسية لتحجيم الصناديق على قاعدة حاسمة: تمتلك min-height الأولوية العليا النهائية دائماً؛ إذ تطبَّق max-height أولاً ثم تأتي min-height لترفع النتيجة إلى حدها الأدنى، فيُحسم الطول النهائي عند 200px!
اختبر هذا التفوق عملياً في المختبر التفاعلي التالي، ثم راجع الجدول الشامل لقواعد الارتفاع الثلاث:
| الخاصية | القيمة الابتدائية | الوظيفة الهندسية الأساسية | الأولوية عند التعارض |
|---|---|---|---|
height | auto | تحدد الطول المفضل لمنطقة المحتوى | تخضع لكل من max-height و min-height |
max-height | none | تضع سقفاً علوياً يمنع التمدد الزائد | تتغلب على height الأكبر وتخضع لـ min-height الأكبر |
min-height | auto | تضمن أرضية طول دنيا مع حرية التمدد | الفائز الأعلى دائماً عند الزيادة على القيمتين |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت توظيف min-height لضمان حد أدنى متناسق يتمدد بأمان مع النصوص الغزيرة، وميزة min-height: 100dvh في أقسام ملء الشاشة، وتفوق min-height الحاسم عند التعارض مع height و max-height. في الخطوة التالية ننتقل إلى درس خاصية max-width للتحكم في أقصى عرض للعنصر في لغة CSS لبناء حاويات أفقية مرنة ومتجاوبة.