Чем span отличается от p

#12 – Теги «Div» и «Span»

В HTML есть два очень крутых тега, чьи возможности пока будет оценить сложно. Таковыми тегами являются «Div» и «Span». За урок мы ознакомимся с ними и научимся их прописывать.

Видеоурок

Теги div и span имеют большую разницу между собой, хотя на первый взгляд это вовсе не заметно. Разница заключается в том, что тег div является блочным элементов, а тег span – строковым.

Блочный элемент – элемент, который является блоком. Каждый блок без использования дополнительных стилей будет отображаться с новой строки, так как в ширину они по умолчанию занимают 100% ширины экрана.

Строковый элемент – элемент, который не является блоком, а соответственно не нуждается в дополнительных пропусках строчек или же каких-то отступах.

Оба тега используются вместе со стилями и использовать их без стилей не является лучшей затеей.

Весь код будет доступен после подписки на проект!

Span и Div

Они используются для того, чтобы группировать области HTML кода и затем подключать к этой группе определенные стили CSS. Это осуществляется при помощи атрибутов class и id, ассоциирующих данные элементы с селекторами класса или идентификатора CSS.

Разница между тегом и тегом заключается в том, что элемент является строчным и обычно используется для группирования небольших областей строчного HTML кода, а элемент является блоковым (что, грубо говоря, выражается в наличие перевода строки до и после этого элемента) и используется для группирования более крупных областей кода.

  Это здорово

Элементы и особенно не должны использоваться слишком часто. Если есть разумная альтернатива, то всегда следует использовать именно ее. Например, если вам нужно выделить слово «здорово» и шрифт в классе «paper» определен как жирный, то этот код может выглядеть следующим образом:

  Это здорово

Если вы еще ничего не знаете о классах и идентификаторах, то не переживайте, все это описано в учебнике «CSS начального уровня». Все что вы сейчас должны запомнить, это то, что элементы и – теги «без значений».

Разница между и

Элементы из предыдущей главы выводятся последовательно на одной горизонтальной строке. Они ведут себя как обычный текст и просто отображаются рядом друг с другом, даже если они имеют определённые размеры и другие свойства, которые не относятся к тексту. Это не должно удивлять, так как , и — элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.

Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как и это своего рода «перенос» содержания на новую строку (вроде разрыва страницы или разрыва строки в текстовых редакторах).

Чтобы увидеть как работают элементы используем три из них и установим для них ширину, высоту и фон.

Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.

В CSS мы пишем класс .container , который связан с тегом .

.container

Посмотрим на это в браузере.

Похоже на один большой прямоугольник. Как насчёт отделить теги друг от друга?

.container

Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый отступом снизу в 10 пикселей. Пришло время проверить эффект в браузере.

Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.

В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:

inline (строчные);
block (блочные);
inline-block (строчно-блочные).

Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.

Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.

По умолчанию, у строчных элементов стилевое свойство display установлено как inline . Для блочных элементов его значение block , а для строчно-блочных элементов inline-block . Теперь вы можете объяснить, из-за чего тег не переносит текст на новую строку. Потому что это строчный элемент, а значит в CSS у него свойство display установлено как inline . С учётом этого код ниже:

один два три

Браузер отобразит в одну линию:

Однако можно изменить это поведение, добавив одну строку в CSS:

span

Теперь наши теги отображаются иначе, каждый из них начинается с новой строки, поскольку мы установили свойство display как block .

Для этого примера мы используем . Вы можете поинтересоваться, что этот тег описывает в документе. Краткий ответ: ничего. Мы используем тег в тех случаях, когда все другие теги не подходят для использования того, что мы вложили в документ. В общем случае тег (в сочетании с разными классами) применяется для получения различных визуальных эффектов, в результате у него нет функции для описания содержимого. К примеру, если вы желаете сделать три вертикальных колонки на сайте, то, возможно, потребуется элемент, который может разделить некоторые строчные или строчно-блочные элементы.

Вообще, хорошей идеей будет не злоупотреблять тегом , если это возможно.

С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.

  Ваше имя: 
  Ваш e-mail: 
  Содержание:

Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги , чтобы окружить каждый элемент формы.

Ещё раз, давайте сравним новый (справа) и старый код (слева).

А теперь посмотрим, как новый код отображается в браузере!

Наша форма теперь выглядит превосходно!

Чем span отличается от p

HTML5 IE Cr Op Sa Fx

    Тег SPAN    
Бернард Шоу

Результат данного примера показан ниже.

Рис. 1

Рис. 1. Вид текста, оформленного с помощью тега и стилей

Статьи по теме

Строчные элементы
Строчные элементы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.