لماذا العنصر div له طول أكبر من طول محتوياته مع أنني لم أعطيه أي طول معين ؟

مصطفى اوريك · 14 سبتمبر 2021

السلام عليكم.

في الكود الموجود تحت, ألاحظ أن العنصر <div> ذو الكلاس logo-container يتناقص طوله بعد إعطائه خاصية display: flex لكي يكون ملاصقا لطول صورة اللوجو,

فأسئلتي هي :

لماذا حدث ما حدث بعد إعطاء هذا الـ <div> خاصية display: flex ؟ و لماذا هذا الكلاس لم يكن طوله ملاصقا للصورة من البداية مع أنني لم أعطيه أي طول معين ؟

الأكواد المقصودة :

<header>
            <div class="logo-container">
                <img src="https://keenthemes.com/metronic/assets/images/logos/logo-white.svg">
            </div>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Metronic</li>
                    <li>Hire Us</li>
                    <li>Buy Now</li>
                </ul>
            </nav>
        </header>

header {
    display: flex;
    align-items: center;
}
header .logo-container {
    flex: 1;
}
nav {
    flex: 2
}
nav ul {
    list-style: none;
    display: flex;
}

/*.logo-container {
	display: flex;
}*/

سامح أشرف · 14 سبتمبر 2021

سبب حدوث ذلك هو أن الصور تكون من نوع inline بشكل إفتراضي وبالتالي يتم حساب طولها من خلال ما يسمى بطول السطر line-height وهذه القيمة تختلف من متصفح لآخر، وبالتالي يمكن حل هذه المشكلة بطريقتين:

يمكنك أن تحدد طول السطر line-height بقيمة 0 للعنصر .logo-container، كالتالي:
```
.logo-container {
  line-height: 0;
}
```
كما يمكن حل المشكلة من خلال إضافة الخاصية display للصورة بقيمة block، كالتالي:
```
img {
  display: block;
}
```
وذلك لأن في العناصر من نوع inline، تُستخدم خاصية line-height لحساب ارتفاع المحتوى نفسه. بينما في العناصر من نوع block، تُستخدم الخاصية line-height لتحديد الحد الأدنى لارتفاع المحتوى داخل العنصر.

يمكنك أن تلقي نظرة على توثيق الخاصية line-height من خلال موسوعة حسوب لمعرفة المزيد عن هذه الخاصية.

مصطفى اوريك · 15 سبتمبر 2021

بتاريخ 12 ساعات قال سامح أشرف:
سبب حدوث ذلك هو أن الصور تكون من نوع inline بشكل إفتراضي وبالتالي يتم حساب طولها من خلال ما يسمى بطول السطر line-height وهذه القيمة تختلف من متصفح لآخر، وبالتالي يمكن حل هذه المشكلة بطريقتين:
يمكنك أن تحدد طول السطر line-height بقيمة 0 للعنصر .logo-container، كالتالي:
.logo-container {
  line-height: 0;
}
كما يمكن حل المشكلة من خلال إضافة الخاصية display للصورة بقيمة block، كالتالي:
img {
  display: block;
}
وذلك لأن في العناصر من نوع inline، تُستخدم خاصية line-height لحساب ارتفاع المحتوى نفسه. بينما في العناصر من نوع block، تُستخدم الخاصية line-height لتحديد الحد الأدنى لارتفاع المحتوى داخل العنصر.
يمكنك أن تلقي نظرة على توثيق الخاصية line-height من خلال موسوعة حسوب لمعرفة المزيد عن هذه الخاصية.

شكرا جزيلا, لماذا بعد إعطاء ذلك الـ <div> خاصية display: flex, الصورة نقص إرتفاعها ؟

سامح أشرف · 15 سبتمبر 2021

بتاريخ 6 ساعات قال مصطفى اوريك:

شكرا جزيلا, لماذا بعد إعطاء ذلك الـ <div> خاصية display: flex, الصورة نقص إرتفاعها ؟

ذلك لأن القيمة flex مثلها مثل block و inline و inline-block، تقوم بالتأثير على العناصر بشكل معين، فعلى سبيل المثال، الخاصية display: block تجعل العناصر تترتب أسفل بعضهم البعض، بينما الخاصية inline تجعل العناصر بجانب بعضهم البعض لكن لا يمكنك أن تحدد طول height للعناصر، بينما القيمة inline-block تجعل العناصر بجانب بعضهم البعض ويمكنك أن تحدد طول height ... إلخ. وكذلك القيمة flex تجعل العنصر ينكمش على محتوياته بشكل إفتراضي وتجعل المحتويات (العناصر الأبناء بجانب بعضهم البعض)، وبالطبع يمكن تغير هذا الأمر من خلال بعض خصائص flexbox مثل الخاصية flex أو الخاصية flex-direction.

يمكنك معرفة المزيد عن خصائص Flexbox في CSS من خلال هذه المقالات:

لماذا العنصر div له طول أكبر من طول محتوياته مع أنني لم أعطيه أي طول معين ؟

السؤال

مصطفى اوريك

3 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

مصطفى اوريك

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية