الفرق بين block و inline و inline-block في CSS

الفرق بين العناصر block و inline

عند تصميم صفحات الويب، من المهم فهم كيفية عرض العناصر المختلفة على الصفحة. العناصر في CSS يمكن تقسيمها بشكل أساسي إلى نوعين: block و inline. العناصر من نوع block تأخذ عرض الصفحة بالكامل، مما يعني أنها تبدأ في سطر جديد ويليها فاصل سطر قبل العناصر الأخرى. أمثلة على العناصر block تشمل div و h1 و p.

من ناحية أخرى، العناصر من نوع inline لا تبدأ في سطر جديد، بل تعرض بجانب العناصر الأخرى. هذا يعني أنها تأخذ فقط العرض الذي تحتاجه. أمثلة على العناصر inline تشمل span و a و strong. هذه العناصر تُستخدم عادةً لتنسيق أجزاء من النص داخل عنصر block.

ما هو inline-block وكيف يختلف عن block و inline؟

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

استخدام inline-block يمكن أن يكون مفيدًا في تصميم القوائم الأفقية أو عرض الصور بجانب النصوص. يعتبر inline-block خيارًا مرنًا لتحقيق تصميمات معقدة دون اللجوء إلى استخدام float أو الأنماط الأخرى التي قد تؤدي إلى تعقيدات غير مرغوبة في التصميم.

أمثلة توضيحية

إليك بعض الأمثلة التي توضح كيفية استخدام block و inline و inline-block.

<div style=\"background-color: lightblue\">
        <h1>عنوان رئيسي</h1>
        <p>هذا نص داخل عنصر block.</p>
    </div>

هذا نص يتضمن <span style=\"color: red\">كلمة ملونة</span> باستخدام العنصر inline.

<div style=\"border: 1px solid black;width: 150px;text-align: center\">
        <p>نص داخل عنصر inline-block</p>
    </div>
    <div style=\"border: 1px solid black;width: 150px;text-align: center\">
        <p>نص آخر بجانب نفس العنصر</p>
    </div>

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