В HTML большинство элементов можно разделить на две группы: блочные
(blok
) и строчные
(inline
).
Начинающему разработчику не всегда сразу удается разобраться - в чем разница между ними, а также запомнить принадлежность какого-либо элемента к конкретной группе. Но со временем, с опытом работы у Вас не возникнет и намека на подобные затруднения.
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, естественно, могут располагаться внутри блочных.
Блочные элементы
К блочным элементам относятся теги:
,
,
...
,
,
,
,
,
....
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим
. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского
) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Любой блок имеет форму прямоугольника.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content
- содержание
).
Границе блока при помощи свойства border
можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Между содержимым и границей существуют внутренние расстояния - поля
(свойство padding
). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding
, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами
(свойство margin
). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Также для блока можно задать фиксированную ширину (свойство width
) и высоту (свойство height
), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.
Фрагмент кода:
Строчные элементы
расположены на одной строке. Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега
div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Результат:
Строчные элементы расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
В HTML существует два типа элементов - блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.
Блочные элементы
Блочные элементы являются основой, которая используется для верстки веб-страниц. Такой элемент представляет собой прямоугольник, который по умолчанию занимает всю доступную ширину страницы (если иное значение не указано в CSS), а длина элемента зависит от его содержимого. Такой элемент всегда начинается с новой строки, то есть, располагается под предыдущим элементом. Блочный элемент может содержать в себе другие блочные и строчные элементы.
Примеры блочных элементов:
,
,
, ,
и т. д.
Строчные элементы
В отличие от блочного, строчный элемент не переносится на новую строку, а располагается на той же строке, что и предыдущий элемент. Такие элементы, как правило, находятся внутри блочных элементов и их ширина зависит лишь от содержимого и настроек CSS. Еще одно отличие строчного элемента от блочного заключается к том, что в нем может находиться только контент и другие строчные элементы. Блочные элементы в строчные вкладывать нельзя.
Примечание:
в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента .
CSS-свойство display: меняем тип элемента
При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:
Display: inline;
Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:
Display: block;
Действие {display:inline} и {display:block}
Также можно сделать «гибрид» - блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:
Display: inline-block;
Действие {display:inline-block}
Далее в учебнике:
свойство CSS border . Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.
Влад Мержевич
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.
Такой элемент занимает всю доступную ширину, высота элемента определяется его
содержимым, и он всегда начинается с новой строки. К блочным элементам относятся
контейнеры
,
,
И др.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать
внутри них встроенные элементы (, например).
Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
В результате данного примера получим слой шириной 342 пиксела. На рис. 1
показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда
в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width
.
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается
как auto
, это позволяет вписывать слой в окно браузера,
не принимая в расчет значения установленных полей. Если изменить ширину на 100%,
то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано
создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Ширина
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1
)
установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя
(layer2
) ширина также задана 100%, но поля определяются
для внутреннего абзаца (тег
). За счет
этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3
)
вообще не применяется свойство width
, поэтому оно
определяется по умолчанию — auto
. В таком
случае слой будет занимать всю ширину окна браузера без всяких горизонтальных
полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика,
но в любом случае нужно учитывать особенности блочных элементов и создавать
универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height
и добавляет к нему еще значение margin
,
padding
и border
.
Если высота слоя не установлена явно, то она вычисляется автоматически исходя
из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно
превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Высота
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной,
за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background
.
Фоном при этом заливается область, которая определяется значениями
width
, height
и padding
(рис. 4).
Рис. 4. Область слоя, которая заполняется фоновым цветом
Таким образом, margin
не принимает участия в формировании
цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается
и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку
внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку,
то увидим совершенно противоположную картину (рис. 5). А все потому, что
Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet
Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Рамка
Lorem ipsum dolor sit amet...
Различия в подходе браузеров при рисовании границ заметны только на цветном
фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически
одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при
верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с
новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только
значениями height
и width
,
но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане
делятся на две части: одни поддерживают в этом вопросе спецификацию, другие
же ее игнорируют и поступают по-своему. Это создает трудности разработчикам,
которые желают делать универсальные веб-страницы. Можно только посоветовать
ограниченно использовать свойства width
и height
,
поскольку по умолчанию браузер применяет аргумент auto
,
который заставляет настраивать размеры элемента автоматически.
Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.
Строчные элементы (inline)
Строчные элементы предназначены для выполнения некоторых действий над текстом, например: перенос строки, выделения фрагмента текста курсивом, логического выделения некоторого текста и применения к нему стилей с помощью CSS и т.д. В зависимости от назначения строчного элемента фрагмент текста помещают между открывающим и закрывающим тегом или применяют тег в любом месте текста, например для переноса строки.
Например: Можно использовать строчный элемент чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.
Строчный элемент имеет ширину, которая равна ширине его содержимого. Строчные элементы не могут содержать внутри себя блочные элементы.
