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

@maksimweb · Регистрация: 03.10.2012

Студворк — интернет-сервис помощи студентам

Здраствуйте. Меня интересует такой вопрос. В чем заключается разница между <div> и <span>?
Заранее благодарю.

@newJS · 29.10.2012, 05:54

Ломов А. Ю.

....в HTML определены такие теги, как <div> и <span>. Они определяют семантически нейтральные блочный и внутристрочный элементы соответственно.
Что это значит— "семантически нейтральный"? Сточки зрения структуры документа, <р>.. .</р> — это определенно абзац; <ul>.. .</ul> — это определенно маркированный список, <em>...</em>— это определенно логическое ударение. И ничто иное. A <div>.. .</div>— это "просто блочный элемент", без какой бы то ни было смысловой нагрузки. Точно так же, <span>.. .</span> — это "просто внутристрочный элемент", не обремененный четким предназначением....

остальное в книге(книгах)

29.10.2012, 11:18

div это блочный элемент, его характеристики следующие:

Блоки располагаются по вертикали друг под другом.
На прилегающих сторонах элементов действует эффект схлопывания отступов.
Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.
По ширине блочные элементы занимают всё допустимое пространство.
Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
Текст по умолчанию выравнивается по левому краю.

span это строчный элемент, вот его характеристики:

Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
Эффект схлопывания отступов не действует.
Свойства, связанные с размерами (width, height) не применимы.
Ширина равна содержимому плюс значения отступов, полей и границ.
Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
Можно выравнивать по вертикали с помощью свойства vertical-align.

@Nbot · 07.03.2016, 16:45

эффект схлопывания отступов

это что такое?

@SQRD · 07.03.2016, 17:42

Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px.

Этот эффект называется эффектом «схлопывания» внешних отступов или «схлопывания» маргинов.

@Nbot · 07.03.2016, 17:47

ВОТ СПАСИБО! буду знать. Часто с таким сталкивался и не понимал в чем дело

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

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

Решение

Решение

@maksimweb 1 / 1 / 0 Регистрация: 03.10.2012 Сообщений: 45

	Разница между div и span 29.10.2012, 02:04. Показов 18329. Ответов 5 Метки нет (Все метки) Здраствуйте. Меня интересует такой вопрос. В чем заключается разница между <div> и <span>? Заранее благодарю. 0

Voodul
	29.10.2012, 11:18
	Сообщение было отмечено как решение Решение div это блочный элемент, его характеристики следующие: Блоки располагаются по вертикали друг под другом. На прилегающих сторонах элементов действует эффект схлопывания отступов. Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>. По ширине блочные элементы занимают всё допустимое пространство. Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа. Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока. Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока. На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align. Текст по умолчанию выравнивается по левому краю. span это строчный элемент, вот его характеристики: Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено. Эффект схлопывания отступов не действует. Свойства, связанные с размерами (width, height) не применимы. Ширина равна содержимому плюс значения отступов, полей и границ. Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости. Можно выравнивать по вертикали с помощью свойства vertical-align.

@SQRD 2 / 2 / 5 Регистрация: 31.12.2015 Сообщений: 27
	07.03.2016, 17:42
	Сообщение было отмечено whiteapps как решение Решение Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px. Этот эффект называется эффектом «схлопывания» внешних отступов или «схлопывания» маргинов. 0

@Nbot 4 / 4 / 1 Регистрация: 30.07.2014 Сообщений: 95
	07.03.2016, 17:47
	ВОТ СПАСИБО! буду знать. Часто с таким сталкивался и не понимал в чем дело 0