لماذا استخدمنا الخاصية block هنا وما الفرق بين block و inline-block؟

مرحبا عمرو، 

ينبغي أولا فهم ما تقوم به القيمة block لعناصر a داخل عناصر القائمة، 

خاصية block في CSS تُستخدم لتحديد كيفية سلوك عنصر HTML في عرضه وتوزيعه داخل العنصر الأب وليس داخل عنصر body، فإعطاء عنصر ما هاته الخاصية سيجعله عنصرا كتليا (بمعنى أنه سيمتد على كامل العرض الحاوي الخاص به). وهو نفس ما اختبرناه في المثال المرفق، فعناصر a أخذت كامل عرض حاويها المباشر وهو العنصر list-inline-item. جرب أزلها وستلتمس سبب قيامنا بإعطاءنا إياها.

أما عن inline-block التي يتم تطبيقها على عنصر list-inline-item من بوتستراب فهي خاصية تمكن العنصر من سلوك نفس سلوك العناصر السطرية من حيث تواجدها على نفس السطر ومن جهة ثانية من سلوك نفس سلوك العناصر الكتلية من حيث تحديد العرض والارتفاع وما الى ذلك.

تلخيص: 

• جعلنا من عناصر a تأخذ كامل عرض حاويها المباشر list-inline-item وأعطينا هاته الأخيرة امكانية أن يتم تحديد عرض وارتفاع لها.

لتوضيح الشرح السابق بأبسط طريقة ممكنة هو إزالة ال width و ال height للعنصر a لذلك تعتقد أنت  أن يأخذ العنصر a عرض الصفحة كاملة ولكن ذلك ليس صحيح حيث أن كل عنصر في الموقع يأخذ موقعه في الصفحه نسبياً للعنصر الأب وتطبيقاً لهذا الكلام يأخذ العنصر a نفس العرض والإرتفاع للعنصر list-inline-item إذا قمنا بتحديد  العرض والإرتفاع كما في الصورة التالية

لذلك بعد التعديلات السابقة يجب أن تصبح التنسيقات كما كانت قبل التعديل

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

وربما قد يفيدك أيضًا حذف ملفات التخزين المؤقتة للمتصفح، عن طريق الضغط على CTRL + SHIFT + DELETE وستظهر لك نافذة تستطيع منها حذف كل البيانات من خلال الإختيار والضغط على clear data، ولكن لا أنصحك بحذف الكوكيز حتى لا يتم تسجيل خروجك من كل الحسابات في المواقع التي سجلت الدخول بها وستضطر إلى إعادة تسجيل الدخول.

وبخصوص فهم الفرق بين block و inline-block فالأفضل شرح الفرق بين block و inline و inline-block:

أولاً العناصر block تبدأ في سطر جديد وتأخذ عرضًا كاملاً في حاويتها، ويمكن أن تحتوي على هوامش (margins) وحشو (padding) وإطار (border) على جميع الجوانب، وأمثلة على العناصر block تشمل <div>، <p>، و <ul>.

العناصر inline لا تبدأ في سطر جديد وتأخذ فقط العرض الذي تحتاجه، وبإمكانها أن تحتوي فقط على هوامش وحشو وإطار من الجانب الأيمن والأيسر فقط أي لا تستطيع تحديد طول وعرض لها، وأمثلة على العناصر inline تشمل <span>، <a>، و <img>.

وهناك أمر هام يجب الإنتباه إلى إليه أنه في حالة استخدام التنسيق التالي على عنصر inline مثل span:

span {
    padding: 12px;
    border: 14px solid red;
}

ستجد أنه يظهر إطار من الأعلى والأسفل وأيضًا حشو من الأعلى والأسفل، لكن كيف ذلك! ببساطة الحشو أو الإطار من الأعلى والأسفل لن يؤثر على طول العنصر وإذا قمت بزيادة القيمة ستجد أنه يتم الزيادة من الجانب الأيسر والأيمن بينما الأعلى والأسفل ستجد أنه  يتم إنشاء منطقة إضافية حول النص تعتبر "منطقة تجاوز" (overflowing area) والتي لن تكون مرئية إلا إذا تم تعيين خلفية للعنصر كما في الإطار.

بينما النص داخل الـ span ظل كما هو على نفس السطر ولم يرتفع أو ينخفض لأسفل.

بمعنى أن الحشو (padding) أو margin أو الإطار للعناصر inline لا يؤثر على المسافة أعلى وأسفل العنصر - أي أن الخط (أو الخط الأساسي للنص) يكون في نفس الوضع الرأسي حيث سيكون (أو بالأحرى: هو) بدون الحشو، والحشو هنا ينشئ منطقة تتجاوز خلالها العناصر القائمة فقط إذا تم تحديد خلفية لها.

أما عناصر inline-block هي عناصر متوسطة بين العناصر block و inline.

ولا تبدأ في سطر جديد، ولكن يمكن أن تحتوي على هوامش وحشو وإطار، مما  يجعلها خيارًا جيدًا للعناصر التي ترغب في التحكم في عرضها وارتفاعها، ولكنك لا ترغب في أن تبدأ في سطر جديد، وأمثلة على العناصر inline-block تشمل <input>، <select>، و <button>.

شرح خـاصيه الـ Display بالقيم الخاصه بهاا بالتفصـيل معها أمثله

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

مع خاصية display:block، يمكنك التحكم في خصائص أخرى مثل الارتفاع والعرض والهوامش والحواف. بالإضافة إلى ذلك، يمكن تعديل الخصائص الأخرى للعناصر مثل العناصر النصية والصور وغيرها، باستخدام CSS.

بالنسبة للخاصية list-inline في Bootstrap، فهي تستخدم لجعل العناصر تظهر بجانب بعضها البعض أفقيًا، بدلاً من وضعها تحت بعضها البعض عموديًا. إذا كنت ترغب في عرض العناصر بشكل أفقي، يمكنك استخدام هذه الخاصية.

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