Коли використовувати <span> замість <p>?


94

Як вказує питання, якщо у мене є якийсь текст, який я хочу додати в HTML, тоді коли я повинен використовувати <p>і коли я повинен використовувати <span>?

Відповіді:


91

Слід пам’ятати, що HTML призначений для ОПИСУ вмісту, який він містить.

Отже, якщо ви хочете передати абзац, то зробіть це.

Однак ваше порівняння не зовсім правильне. Більш пряме порівняння було б

Коли використовувати <div>замість a <p>?

оскільки обидва елементи є елементами блоку.

A <span>є вбудованим, подібно до якоря ( <a>) <strong>,, focus ( <em>) тощо, тому майте на увазі, що за замовчуванням це характер і в html, і в натуральній формі, що абзац спричинить розрив перед собою та після нього, як <div>.

Іноді при стилюванні речей - вбудованих речей - a <span>- це чудово, щоб дати вам щось, на що можна “зачепити” css, але в іншому випадку це порожній тег, позбавлений семантичного або стилістичного значення.


7
Порівнюючи вбудовані та блокові елементи, будьте обережні, щоб не описувати візуальні аспекти. Як зазначається в специфікації HTML5 , a pможе бути не обов’язково стилізованим з навколишніми розривами рядків, наприклад, за ним може бути вбудований символ назви . Терміни "вбудований" та "блокувати" також нічого не означають для сліпих користувачів. Швидше, розрізняйте вміст потоку та вміст фрази (див. Це посилання ).
chharvey

3
Крім того, padding-left поводиться інакше, pніж у span. В абзаці відступ впливає на кожен рядок (блок тексту), тоді як на проміжок - лише на перший рядок.
дійневала

95

Семантично ви використовуєте <p>теги для позначення абзаців. <span>використовується для застосування стилів та / або класів CSS до довільного розділу тексту та вбудованих елементів.


13

<p>Тег є paragraph, і , як такий, він є блок - елемент (як, наприклад, h1і div), в той час як spanце вбудований елемент (як, наприклад, bі a)

Блокові елементи за замовчуванням створюють пробіли зверху і знизу, і ніщо не може бути вирівняно поруч з ними, якщо ви не встановите floatдля них атрибут.

Вбудовані елементи мають справу з інтервалами тексту всередині абзацу. Вони, як правило, не мають полів, і, таким чином, ви не можете, наприклад, встановити widthдля нього значення.


так, span не має полів і тому добре, як комірка таблиці (td), мати можливість використовувати HTML-розмітку
Ігор Фоменко

6

Розмах повністю несемантичний. Він не має значення, а служить лише елементом для косметичних ефектів.

Абзаци мають семантичне значення - вони повідомляють машині (наприклад, браузеру чи зчитувачу з екрана), що вміст, який вони інкапсулюють, є блоком тексту і має таке саме значення, як абзац тексту в книзі.


5

Семантично кажучи, ap є тегом абзацу і повинен використовуватися для форматування абзацу тексту. Розмах - це вбудована зміна форматування, яка не обробляється семантично.


5

Розмах - це вбудований елемент форматування, який НЕ має подачі рядків зверху або знизу.

А р - це блок-елемент, який МАЄ передбачувану подачу лінії зверху та знизу.

http://w3schools.com/tags/default.asp


4

Практичне пояснення: за замовчуванням <p> </p>додаватиме розриви рядків до та після вкладеного тексту (тому він створює абзац). <span>не робить цього, тому його називають вбудованим .


3

Тег p позначає елемент абзацу. До нього застосовуються поля / відступи. Розмах - це нестильований вбудований тег. Важливою відмінністю є те, що p - елемент блоку, коли інтервал вбудований, що означає, що <p>Hi</p><p>There</p>він з'являється на різних лініях, коли <span>Hi</span><span>There</span>накручується поруч.


3

Коли ми використовуємо звичайний текст у той час, ми хочемо <p>теги, коли ми використовуємо звичайний текст з деякими ефектами, тоді нам потрібен <span>тег


2

<span> - це вбудований тег, <p> - тег блоку, що використовується для абзаців. Браузери відображатимуть порожній рядок під абзацом, тоді як <span> s будуть відображатись на тому самому рядку.


0

тег - це елемент рівня блоку, але тег - це вбудований елемент. Зазвичай ми використовуємо тег span для стилювання всередині елементів блоку. але для вбудованого стилю вам не потрібно використовувати тег span. вам потрібно зробити це; перетворити елемент блоку на вбудований елемент за допомогою "display: inline"


-6
p {
    float: left;
    margin: 0;
}

Жодного інтервалу не буде, він схожий на проліт.

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