إصلاح المسافات في إخفاء التفاصيل

[debryc (Deborah Chang)]

لاحظت سلوكًا غريبًا في المسافات عند استخدام إخفاء التفاصيل.

عندما يكون المحتوى داخل التفاصيل مجرد نص، توجد مسافة جيدة بين قائمة “إخفاء التفاصيل” المنسدلة والمحتوى، ثم بين المحتوى وقسم “إخفاء التفاصيل” التالي. لكن هذا لا ينطبق عندما يكون المحتوى قائمة.

على ميتا

عندما يكون المحتوى نصًا

انظر إلى المسافة البيضاء المفيدة بين هذا المحتوى و"عندما يكون المحتوى نصًا"، وكذلك بين هذا المحتوى و"عندما يكون المحتوى قائمة غير مرتبة" أدناه!

عندما يكون المحتوى قائمة غير مرتبة

• بوو… الآن لا توجد مسافة
• بين هذا المحتوى و"عندما يكون المحتوى قائمة غير مرتبة"
• وبين هذا المحتوى و"عندما يكون المحتوى قائمة مرتبة"

عندما يكون المحتوى قائمة مرتبة

1. الآن توجد مسافة بين هذا المحتوى و"عندما يكون المحتوى قائمة مرتبة" أعلاه
2. ومسافة أدناه أيضًا!

محتوى تعبئة فقط

انظر إلى العنوان أعلاه.

[cosdesign (Cos)]

هذا يجب أن يحل المشكلة:

   .cooked details[open]>ul {
        margin: 1em 0;
    }

[codinghorror (Jeff Atwood)]

هذا لا علاقة له فعليًا بـ “إخفاء التفاصيل” — بل هو نتيجة لانتهاء منطقة المحتوى بقوائم بدلاً من فقرات. أسهل حل هو إضافة فقرة في الأسفل، أو إضافة تعليق HTML.