В чем отличие тегов div и span

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

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

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

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

Согласно приведённым выше условиям, 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 и Div

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

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

  
Это здорово
 
 

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

  
Это здорово





 
 

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

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

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

Видеоурок

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

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

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

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

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

Теги div и span, контейнеры для стилизации

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

Но раз такое выделение «бессмысленно», то и делать его «смысловыми» тегами нельзя? Да, это так.

Но есть два специальных тега у которых «смысла» нет. Это теги (сокращение от «division») и . Это «чистые» элементы, которые отлично подходят для визуальной группировки других элементов. Использовать эти теги рекомендуется, если более подходящих семантических тегов не нашлось.

Теги и не имеют никакого оформления по умолчанию и их почти всегда используют вместе с атрибутом class , чтобы легко добавлять им собственные стили.

Тег обычно используется для группировки крупных элементов, например, нескольких абзацев, или в качестве контейнера для создания сеток страниц. А используется для выделения мелких текстовых элементов: частей слов, отдельных слов или фраз, состоящих из нескольких слов:

 
 
Мы два красивых выделенных абзаца.
 
С жёлтеньким фоном!





 
 
Текст, в котором выделена фраза.
 

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

После выполнения этого шага, можно скачать промежуточное состояние нашего Сайта начинающего верстальщика по этой ссылке.

Мы подготовили стили для выделения текста и блока. Обратите внимание на вкладку style.css .

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Блог

День четвёртый. Как я чуть не заболел

Сегодня я узнал, что верстальщиком быть опасно. Когда ты только начинаешь свой путь, ты ещё неопытен и легко можешь заразиться какой-нибудь болезнью. Вот некоторые из опасностей, которые могут подстерегать:

Диватоз

Острый страх семантики

Таблицефобия

Избегание таблиц

Стремление сверстать таблицу на дивах

Классянка

Навязывание классов каждому тегу