Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Блоковая модель в CSS Поля и отступы в CSS

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


В HTML большинство тегов можно отнести к двум основным группам - блочные элементы и строчные элементы.

Блочными являются такие теги как <h1><h6>, <p>, <table> и другие. Блочные элементы представляют собой как бы отдельную структурную единицу – блок, выделенный абзацем и имеющий границы. Нельзя расположить два блочных элемента на одной строке. Блоки следуют один под другим.

Что касается строчных элементов, то их можно располагать на одной строке и, естественно, внутри блока. Строчные элементы не отделяются от остального содержимого страницы абзацами. Это такие теги как <strong>, <em>, <img> и другие.

Выше говорилось о том, что блоки располагаются друг под другом. Существуют также вложенные блоки, расположенные внутри других: например абзацы, представленные тегом <p>, могут располагаться внутри контейнера <div>. Но и те, и другие имеют одинаковою структуру.

Структура блока

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

Мы говорим о блоковой модели в CSS, так как именно свойства CSS позволяют определить и задать все параметры блока, чего нельзя сделать средствами языка HTML.

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

Каждый блок имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content — содержание).

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

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

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

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

Пример

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

<div style="border:#CC0066 solid 2px; width:700px;">

<div style="border:
#009999 solid 1px;"> Для вложенного блока не заданы поля и отступы.</div>
<div style="border:
#009999 solid 1px; padding:5px;"> Вложенный блок с полями 5 пикселей. </div>
<div style="border:
#009999 solid 1px; padding:5px; margin:5px;"> Для вложенного блока заданы поля и отступы шириной 10 пикселей.</div>

</div>

<div style="border:
#3399CC dotted 3px; width:400px; margin-top:25px; padding:5px;">
Предыдущий блок имеет вложенные блоки. Это - нет. Для него установлены поля 5 пикселей и верхний отступ 25 пикселей!
</div>

Результат:


Для вложенного блока не заданы поля и отступы.
Вложенный блок с полями 5 пикселей.
Для вложенного блока заданы поля и отступы шириной 10 пикселей.
Предыдущий блок имеет вложенные блоки. Это - нет. Для него установлены поля 5 пикселей и верхний отступ 25 пикселей!

Ссылки и Псевдоклассы Блоковая модель в CSS Поля и отступы в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

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