عند استخدام كتلة مضمنة، فإن عنصر div المضمن الفارغ داخل حاوية مخفية يكتسب ارتفاعًا مثيرًا للفضول. لماذا يحدث هذا، على عكس سلوك العرض:كتلة؟

العرض:inline-block يضفي تنسيقًا محددًا على العنصر:

• تنسيق المستوى المضمن: يتم وضع العناصر خارج أفقيا داخل كتلة الحاوية.
• حسابات ارتفاع الخط: يتم حساب ارتفاع الخط بشكل مختلف للعناصر المضمنة. بالنسبة لعناصر الكتلة المضمنة، يصبح ارتفاع مربع الهامش. بالنسبة للعناصر المضمنة العادية، فهي خاصية "ارتفاع السطر".

عندما يكون عنصر الكتلة المضمنة فارغًا، فإنه يفترض ارتفاع السطر الأساسي، على الرغم من عدم وجود محتوى خط أو نص. يؤدي هذا إلى حصول العنصر على ارتفاع صغير ولكن ملحوظ، على الرغم من حالته الفارغة.

الحل البديل لمنع مشكلة الارتفاع هذه هو استخدام غلاف بحجم الخط: 0 لإزالة حساب ارتفاع الخط:

.المغلف { حجم الخط: 0; } .المجمع شعبة { حجم الخط: متوسط؛

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

التحديث: فهم ارتفاع الكتلة المضمنة

على عكس الافتراضات الأولية، لم يتم توثيق الارتفاع الدقيق لعنصر الكتلة المضمنة الفارغ رسميًا. ومع ذلك، تشير الملاحظات والاختبارات إلى أن:

تحتفظ الكتلة المضمنة بحد أدنى من مساحة الخط بناءً على ارتفاع الخط الموروث، والذي يتم تحديده عادةً بواسطة عنصر

.

هذا الخط تستمر المساحة على الرغم من أن الكتلة المضمنة فارغة ويجب من الناحية النظرية معاملتها على أنها ذات ارتفاع صفري وفقًا لمواصفات CSS.