«Единственный способ творить великие дела – это любить то, что ты делаешь»
Статьи


В HTML большинство элементов можно разделить на две большие группы: блочные (blok) и строчные (inline).

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

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



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

К строчным элементам относятся теги: <a>, <br>, <code>, <em>, <img>, <span>, <strong>, <sub>, <sup>. О тегах HTML читайте здесь.

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

На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.

Строчные элементы могут располагаться внутри блочных элементов.

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

Блочные элементы - Структура блока

К блочным элементам относятся теги: <div>, <dl>, <h1>...<h6>, <hr>, <ol>, <p>, <table>, <ul>.

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

Один или несколько блоков могут располагаться внутри другого (родительского) блочного элемента.

В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.

Блоковая модель в CSS

Итак, какова же структура блока?

Любой блок имеет форму прямоугольника.

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

Любое содержимое блока или веб-страницы называется контентом (англ. content — содержание).

Границе блока при помощи свойства border можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.

Между содержимым и границей существуют внутренние расстояния - поля блока (свойство padding). Ими не обязательно пользоваться. То есть если их явно не установить при помощи свойства padding, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.

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

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

Фрагмент кода

<p>
<img src="img/peng_64.gif"> <code> Строчные элементы </code> <span style="color: red;"> расположены на одной строке. </span> <strong> Они заключены в блочный элемент - абзац.</strong> Перенос текста происходит автоматически - в конце строки.
</p>

<p>
Этот - параграф, начинается с новой строки. </p>

<div style="border
: #00CC66 solid 1px;">
<p>
Два параграфа расположены. </p>
<p>
Внутри блока - тега <span style="color:#CC0000; font-size:18px;">div</span></p>
</div>

<p>
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление.</p>

Результат

Строчные элементы расположены на одной строке. Они заключены в блочный элемент - абзац. Перенос текста происходит автоматически - в конце строки.

Этот блок - параграф, начинается с новой строки.

Два параграфа расположены.

Внутри блока - тега div

Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление.

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?

Статьи по популярности