Какие элементы по умолчанию являются строчными

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

По аналогии с блочными элементами перечислю их характерные особенности.

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

Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег , который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

Для вёрстки строчные элементы применяются реже, чем блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры ,

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

Пример 3.16. Применение тега

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

       
. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения . Задержитесь на две секунды. Выполните  

Результат примера показан ниже (рис. 3.25).

Рис. 3.25. Текст, оформленный с помощью стилей

В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space : nowrap .

Для текста, который не обрамлён строчным тегом вроде создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).

Рис. 3.26. Анонимные строчные элементы

Серым цветом на рисунке помечен текст внутри тега , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block . Также возможно и обратное действие через значение inline (пример 3.17).

Пример 3.17. Свойство display

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат примера приведен на рис. 3.27.

Рис. 3.27. Замена блочного элемента на строчный

В данном примере блочный тег

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

в виде строчного элемента. В принципе, аналогичным решением будет использовать вместо

тег .

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

Блочные и строчные html теги

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

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

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

Строчные теги

Тег	Краткое описание
	Создает гиперссылку.
	Определяет текст как аббревиатуру.
	Определяет звуковое содержимое.
	Выделяет текст жирным шрифтом.
	Определяет направление отображения текста.
	Создает кнопку.
	Определяет область для рисования графики.
	Определяет заголовок для работы — преобразует текст в курсивный.
	Определяет кусок программного кода — преобразует текст в моноширинный.
	Определяет текст, который был удален из документа — отображается перечеркнутым текстом.
	Выделяет определения термина — преобразует шрифт в наклонный.
	Определяет выделенный текст — преобразует текст в курсивный.
	Преобразует текст в курсивный.
	Определяет встроенный frame.
	Определяет изображение.
	Создаeт поле для ввода данных.
	Определяет текст, который был добавлен в документ — отображает текст подчеркнутым.
	Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный.
	Определяет важную часть текста.
	Определяет скалярное измерение в пределах известного диапазона.
	Определяет короткую цитату.
	Определяет, что показывать браузеру, который не поддерживает тег .
	Добавляет аннотацию сверху или снизу от символов, заключенных в элементе .
	Определяет текст, который больше не является правильным — отображает текст перечеркнутым.
	Определяет текст, который является результатом вывода компьютерной программы.
	Определяет текст маленького размера.
	Создает выпадающий список.
	Определяет строчный элемент документа.
	Определяет важный текст — преобразует шрифт в полужирный.
	Определяет текст в нижнем индексе.
	Определяет текст в верхнем индексе.
	Создает ячейку таблицы.
	Создает многострочное текстовое поле.
	Создает заголовочную ячейку в таблице.
	Определяет переменную — выделяет текст курсивом.
	Добавляет на страницу видео файл.

Блочные теги

Тег	Краткое описание
	Определяет контактную информацию автора документа/статьи.
	Определяет текст как статью, новость и др.
	Определяет контент в стороне от содержимого страницы.
	Выделяет текст с другого источника, как блочную цитату.
	Cоздает описание элемента в списке определений.
	Определяет раздел документа.
	Создает список определений.
	Oпределяет термин в списке определений.
	Группирует элементы страницы.
	Нижняя часть документа.
	Определяет HTML форму.
—	Определяют HTML заголовки.
	Задает «шапку» сайта или раздела.
	Создает горизонтальную линию.
	Определяет элемент списка.
	Определяет группу ссылок для навигации.
	Создает нумерованный(упорядоченный) список.
	Определяет абзац.
	Оставляет содержимое в первоначальном виде.
	Определяет небольшую аннотацию (для типографии Восточной Азии).
	Определяет разделы документа.
	Создает таблицу.
	Создает строку в таблице.
	Определяет маркированный(неупорядоченный) список.

Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

Блочные элементы

Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).

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

Блочные элементы

HTML

p> Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца. p> 

CSS

p  background-color: #8abb55; > 

Использование

• Блочные элементы могут отображаться только внутри элемента и его потомков.

Блочные против строчных

Существует несколько ключевых отличий между блочными и строчными элементами:

Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.

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

Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.

Элементы

Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).

Длинная («блочная») цитата.

Раскрывающийся блок с подробностями.

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

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

Строчные элементы — это элементы веб-страницы, которые формируют строчные блоки с характерным для них поведением.

К строчным элементам относятся элементы со значением свойства display: ‘inline’, ‘inline-table’ и ‘inline-block’.

button, textarea, input, select, img, span, a, q, code, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, tt, u, var

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

Давайте прямо сейчас рассмотрим, что это за поведение и чем оно отличается от блоков, которые формируют блочные элементы.

1) Самой главной особенностью строчных блоков является то, что при размещении их на веб-странице, они становятся частью строки, в которую они вставляются.

Строчный элемент 1 Строчный элемент 2 Строчный элемент 3

Они располагаются друг за другом, в пределах одной строки как буквы в слове. Когда ширина блока, в котором размещаются строчные элементы не позволяет разместить еще один элемент в пределах одной строки, он будет размещен на следующей строке.

2) В строчные элементы запрещена вставка блочных элементов. Внутри строчных элементов могут содержаться только строчные элементы и анонимные блоки.

Следующая запись не пройдет валидацию.

Необходимо написать так:

3) Схлопование margin для строчных элементов не действует.

4) Свойства width и height для строчных элементов не работают.

margin-top и margin-bottom не работают.

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

Исключение элемент img, который относится к строчным элементам с замещаемым контентом. Для него все эти свойства работают.

5) Ширина строчных элементов состоит из следующих составляющих:

width = margin-left+margin-right+padding-left+padding-right + border-left + border-right + width(ширина, необходимая для того, чтобы вместить содержимое)

6) Высоту строчных элементов можно регулировать следующими свойствами:

line-height + padding-top + padding-bottom + border-top + border-bottom + height (высота необходимая, чтобы вместить содержимое)

7) Для строчных элементов можно использовать свойство vertical-align

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

Понимание принципа работы строчных элементов и их свойств может значительно сэкономить ваше время при верстке веб-страниц.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: