В чем разница между div и span
Я новичок в программировании и хотелось бы досконально разобраться в чем разница между div и span .Стоит ли использовать только div или только span или их нужно как-то комбинировать. И кому лучше присваивать название класса, только div-у или span-у ,или опять таки комбинировать. Заранее спасибо 🙂
Отслеживать
задан 2 июн 2019 в 21:11
103 1 1 серебряный знак 5 5 бронзовых знаков
это разные типы элементов, по умолчанию они имеют разное поведение, но стилями может быть все изменено с точностью до наоборот
2 июн 2019 в 21:27
Div — используется как контейнер, а span как обрамление для текста, span — строчный элемент, используется как выделение текста, пример:
Something
. Если тег p, блочный, он будет переносить текст на новую строку, а span — строчный, он не переносится, а идёт в линию. Div — нужен для создания контейнеров, в которые необходимо что-то положить, либо же для создания какого-то объекта.
2 июн 2019 в 22:24
DIV — блочный эл-т, SPAN — строчный, это вообще основа основ вёрстки, которая к программированию не имеет прямого отношения.
Span и Div
Они используются для того, чтобы группировать области HTML кода и затем подключать к этой группе определенные стили CSS. Это осуществляется при помощи атрибутов class и id, ассоциирующих данные элементы с селекторами класса или идентификатора CSS.
Разница между тегом и тегом заключается в том, что элемент является строчным и обычно используется для группирования небольших областей строчного HTML кода, а элемент является блоковым (что, грубо говоря, выражается в наличие перевода строки до и после этого элемента) и используется для группирования более крупных областей кода.
Это здорово
Элементы и особенно не должны использоваться слишком часто. Если есть разумная альтернатива, то всегда следует использовать именно ее. Например, если вам нужно выделить слово «здорово» и шрифт в классе «paper» определен как жирный, то этот код может выглядеть следующим образом:
Это здорово
Если вы еще ничего не знаете о классах и идентификаторах, то не переживайте, все это описано в учебнике «CSS начального уровня». Все что вы сейчас должны запомнить, это то, что элементы и – теги «без значений».
Тег < p >и < span >. Есть разница?
тег < p >он является блочным, и тег < span >он является строчным. и увидел как люди когда им нужно сделать тег < p >строчным добавляют к нему в css свойство display: inline block; Зачем?
- Вопрос задан 19 апр. 2023
- 1309 просмотров
2 комментария
Простой 2 комментария
Нередко в коде пишут полную дичь, даже не понимая что они делают, зачастую веб-сайты делают школьники для подработки. Также само как и пишут книги люди, бывает абсолютно неадекватные человеки это делают, а бывает великие учёные. И осуждать каждую нелепость, в какой либо книге — попросту не хватит жизни.
Ориентируйтесь на чтение кода у сайтов больших компаний, а не каких попало. Там тоже так делают?
Вадим @MrDecoy Куратор тега CSS
Разница в тэгах существует вовсе не для того, чтобы их было удобнее стилизовать или пользоваться стандартным стилем браузера. Вам ниже сказали на что нужно обратить внимание — семантика. css к разнице тэгов вообще никак не относится.
Ну и отвечая на вопрос, да. Разница колосальная.
Это как разница между словом в предложении и самим предложением.
Решения вопроса 1
Токсичный шарпист
Разница в том, что span не несёт никакого семантического смысла, а p несёт и является параграфом.
Ответ написан 19 апр. 2023
Нравится 12 5 комментариев
Ankhena @Ankhena Куратор тега CSS
Хочу добавить, что смысл слова «параграф» с жизни и в верстке отличается и имеет более расширенное применение.
В жизни это просто блок текста из одного или нескольких предложений.
А в верстке может также служить и для группировки фразового контента. Например, лейбла и инпута.
Вроде ж это абзац, а не параграф (если переводить на русский язык)?
Ankhena @Ankhena Куратор тега CSS
Ankhena @Ankhena Куратор тега CSS
Кирилл Гусарев, читать про параграфы и что под этим словом понимается в верстке
Ответы на вопрос 5
Front-end developer
Советую погуглить про семантику, тэги отличаются не просто так, есть main, header, footer — так же с текстом, все нужно использовать по мере необходимости, сайт конечно же можно на div-ах написать но это будет «неправильно» для поисковых роботов
Ответ написан 19 апр. 2023
Нравится 6 1 комментарий
Дмитрий Беляев @bingo347 Куратор тега HTML
Семантика в первую очередь не для поисковых роботов, а для людей.
Тот же p будет отличаться от span в режиме читалки.
I want, women not to get sick
Ну если к примеру мы захотим выделить текст каким то цветом .. ни весь а к примеру какие то отдельные слова . это просто удобнее сделать не блочным тегом а именно строчным, к примеру как: https://codepen.io/topicstarter/pen/oNazwQX и нам для этого не надо писать кучу css что бы сделать параграф внутри параграфа инлайновым . Вообще тег
это обычный параграф и не более того который без css работает как div в отличии от span который по сути тот же div только строчный но оба ‘несут за под капотом’ строки,текст
Ответ написан 19 апр. 2023
Комментировать
Нравится 4 Комментировать
PolarOne @PolarOneBear
Собственно все написали.
Пример
Советую погуглить про семантику, тэги отличаются не просто так, есть main, header, footer - так же с текстом, все нужно использовать по мере необходимости, сайт конечно же можно на div-ах написать но это будет "неправильно" для поисковых роботов
Разница в том, что span не несёт никакого семантического смысла, а p несёт и является параграфом.
Если захотите сделать какой-то элемент внутри «строки» (параграфа), выделить текст, сделать иконку — то еще один «строковый» элемент не лучшая идея.
Дополнение: p — блочный элемент, занимает 100% ширины страницы или родительского блока. Может быть переопределен свойством display.
Разница между p и span такая — на примере одного слова «визуально». Рамки — это «место» занимаемое тегом
Ответ написан 19 апр. 2023
Нравится 3 4 комментария
Ankhena @Ankhena Куратор тега CSS
Если захотите сделать какой-то элемент внутри строки (параграфа), выделить текст, сделать иконку — то еще один строковый элемент не лучшая идея.
Во-первых, по умолчанию, p это блок, а не строка.
Во-вторых, что во что можно вкладывать определяется не блочностью, а категорией контента.
В-третьих, то, что вы нарисовали определяется свойством display , а не просто самим тегом.
PolarOne @PolarOneBear
Ankhena, не отбивайте у человека желание изучать)) Я попытался максимально доступно объяснить, а до display автор вопроса дойдет чуть попозжее)
зысы да, про «строку» загнул малость
Ankhena @Ankhena Куратор тега CSS
PolarOne, какой тег использовать зависит не от их визуальной разницы или того какую ширину они занимают по умолчанию.
А от смыслового назначения тега.
И именно это отвечает на вопрос автора, почему пишут p , а потом меняют ему display
PolarOne @PolarOneBear
Ankhena, не дочитал. та не, этого не было! Буду читать внимательнее в дальнейшем. Спасибо что указали на это. блин(
#12 – Теги «Div» и «Span»
В HTML есть два очень крутых тега, чьи возможности пока будет оценить сложно. Таковыми тегами являются «Div» и «Span». За урок мы ознакомимся с ними и научимся их прописывать.
Видеоурок
Теги div и span имеют большую разницу между собой, хотя на первый взгляд это вовсе не заметно. Разница заключается в том, что тег div является блочным элементов, а тег span – строковым.
Блочный элемент – элемент, который является блоком. Каждый блок без использования дополнительных стилей будет отображаться с новой строки, так как в ширину они по умолчанию занимают 100% ширины экрана.
Строковый элемент – элемент, который не является блоком, а соответственно не нуждается в дополнительных пропусках строчек или же каких-то отступах.
Оба тега используются вместе со стилями и использовать их без стилей не является лучшей затеей.
Весь код будет доступен после подписки на проект!