Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Интернет-магазин под ключ

Статьи для сайтов!!!
Главная Статьи Блочные и строчные элементы Графические форматы

Блочные и строчные элементы

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


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

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

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

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

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

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

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

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

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

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

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

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

Блочные и строчные элементы

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

Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. 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. И для них задано стилевое оформление!


Путь к файлу Блочные и строчные элементы Графические форматы
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru