الفرق بين span و div
يتم استخدام span و div لإضافة العناصر مثل img و audio و video ...الخ ضمنها, لكن يوجد اختلاف بسيط بينهما.
مثال 1
لنفترض لدينا الوسم h1 كما يلي :
<body>
<h1>Programmer <div>Tech</div></h1>
<h1>Programmer <span>Tech</span></h1>
</body>
صورة للكود من المحرر
ونتيجة فتحه في المتصفح تكون
شرح المثال السابق 1
عندما نقوم بإستخدام العنصر div ضمن العناصر دائماً سوف يبدأ بسطر جديد كما هي في السطرين الأول و الثاني, دقق في الكود السابق جيداً حتى تفهم جيداً, أما عندما نقوم بإستخدام العنصر span سيبقى بنفس السطر كما في السطر الثالث.
مثال 2
سوف نرفق صورة ضمن الكود بدل الكلمة Tech سيكون بالشكل
<body>
<h1>Programmer <div><img src="https://www8.0zz0.com/2020/09/21/17/405871970.jpg" alt="t"></div></h1>
<h1>Programmer <span><img src="https://www8.0zz0.com/2020/09/21/17/405871970.jpg" alt="t1"></span></h1>
</body>
صورة للكود من داخل المحرر
و نتيجة المتصفح هي
شرح المثال السابق 2
كما شاهدنا الفرق أنه في div الصورة بدأت بسطر جديد بعكس العنصر span بقيت الصورة في السطر نفسه طالما توجد مساحه في السطر.
ملاحظة
العناصر h و p يكونوا بنفس مبدأ العنصر div يبدأ بسطر جديد أما العنصر label بنفس العنصر span يبقى بنفس السطر.
مثال 3
<body>
<div>Programmer <h2>Tech</h2></div>
<span>Programmer <h2>Tech</h2></span>
</body>
صورة من المحرر
و نتيجة المتصفح
شرح المثال 3
كما لاحظنا في المثال السابق أنه عندما استخدمنا الوسوم h و p بدأ بسطر جديد و كأنه مثل div.
مثال 4
<body>
<div>Programmer <label>Tech</label></div>
<span>Programmer <label>Tech</label></span>
</body>
صورة من المحرر
و النتيجة في المتصفح تكون
شرح المثال 4
كما لاحظنا في المثال السابق أنه عندما استخدمنا الوسم label بقي بنفس السطر و كأنه مثل span.
الخلاصة
الفرق بين div و span عندما نقوم بإستعمال div و h و p ينزل سطر جديد للأسفل, اما عند استعمال span و label يبقى بنفس السطر.
