Чим відрізняються теги <span> від <div>?


15

Мені цікаво, тег span, здається, працює так само, як і div.

Відповіді:


22

Основна відмінність полягає в тому, що <span>тег є вбудованим елементом, тоді як <div>тег - елементом рівня блоку .

Два елементи рівня блоку (div) будуть відображатися один за одним вертикально, тоді як два вбудовані елементи (прольоти) будуть відображатися один за одним по горизонталі.

Щоб зрозуміти різницю у візуальному плані, це може допомогти мислити <span>елемент як слово, а <div>елемент - як абзац: діви зазвичай використовуються для викладки блоків змісту. Проміжки зазвичай використовуються для виділення груп слів у цьому вмісті.


11

І Нік, і Тобі чудово відповіли на ваше запитання, але щоб зробити це ще на один рівень.

За замовчуванням <div>s - елементи блоку, а <span>s - вбудовані елементи. Це загальні теги, які просто забезпечують блокові або вбудовані контейнери. На практиці вони можуть бути скручені через CSS, щоб бути дещо взаємозамінними, встановивши атрибут відображення css на "block", "inline" або навіть "inline-block" (серед інших).

Однак згинати їх, щоб вони діяли як один одного, не рекомендується. І в HTML є правила, які фактично перешкоджають використанню елементів рівня блоку всередині інших елементів (в основному вбудованих елементів, таких як <a>тег), тож вам слід спробувати використовувати правильний тег там, де це доречно, і намагатися лише змінити їх поведінку, коли абсолютно необхідний.

Постарайтеся уявити їх як смислові елементи. Використовуйте, <span>коли ви хочете тегувати вміст, який використовується всередині блоків тексту, наприклад, і використовуйте <div>, коли вам потрібно додати додаткову структуру до самої сторінки.

Сказавши це, HTML5 має безліч семантичних елементів, які повинні значно зменшити необхідність використання будь-якого з цих загальних тегів. Використання семантичних тегів настійно рекомендується додавати велику кількість знаків і прольотів.

Удачі!


5

Основна відмінність полягає в тому divs, що вони є блоковими елементами і spansє вбудованими елементами.

Обидва можуть бути стилізовані за допомогою CSS, щоб діяти, як ви хочете, але поза рамкою ви зазвичай використовуєте spansдля менших вбудованих розділів і divsдля великих блоків.

Деякі речі впливатимуть на елементи вбудованих та блокових елементів по-різному, наприклад, ви не можете встановити висоту на spanелемент.


Що ви маєте на увазі під блоком та вбудованим елементом?

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.