Поля, границы, отступы

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

Элементы HTML-страницы обычно делятся на блочные и строчные.

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

• До и после блочного элемента существует перенос строки.
• Блочным элементам можно задавать ширину, высоту, поля и отступы.
• Занимают всё доступное пространство по горизонтали.

Блочные элементы: абзацы <p>, заголовки от <h1> до <h6>, списки <ul>, <ol> и другие.
Элемент <div> является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили.

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

• До и после строчного элемента отсутствуют переносы строки.
• Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.
• Можно задавать только горизонтальные отступы и поля.

Строчные элементы: ссылки <a>, выделенные слова <em>, важные слова <strong> и другие.
Универсальный строчный элемент <span> предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей.

Блочные элементы могут содержать блочные или строчные элементы. Строчные элементы могут содержать только другие строчные элементы (за исключением элемента <a>).

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

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

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

Поля (margin)

Стилизация полей чаще всего используется для управления расстоянием между элементами. В Примере 1 показано применение полей. Отображение границ включено для визуализации полей. В данном примере установлены следующие значения полей различных элементов:

• значения левого, правого, нижнего и верхнего полей установлены в 0;
• значения левого поля абзацев установлено в 100px, нижнего в 0, а верхнего в 5px;
• значение правого поля элемента h1 установлено в 100px;

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

Вертикальное поле между двумя соседними элементами равно максимальному полю между ними. Если поле одного элемента равно 20px, а второго 40px, то поле между ними будет 40px. Этот эффект называется эффектом «схлопывания» полей.
Горизонтальные поля между элементами складываются. Например, горизонтальное поле между двумя элементами с полями 30px будет равно 60px.

Эффекты схлопывания и выпадения полей

Если внутри родительского блока расположить блок и задать ему поле сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится верхнее поле. Т.е. верхнее поле внутреннего элемента «выпадает» из родительского элемента. Если у родительского элемента тоже было задано верхнее поле, то выберется максимальное поле между собственным и «выпавшим». Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу отступ (padding) сверху или добавить рамку сверху.

Границы (border)

Стилизация границ включает в себя стилизацию толщины, цвета и типа линии.

Отступы (padding)

Отступы позволяют стилизовать промежуток между содержимым и его границей. В Примере 2 установлено значение отступов 20px для всех элементов.

Справочник

Задание

Задайте одинаковое оформление для всех трех документов (Туристическая фирма, две web-страницы по направлениям отдыха):

• Определите в качестве фона страницы изображение, которое должно распологаться по правому краю только вдоль вертикальной оси, а оставшуюся часть страницы заполните цветом. Справочник
• Подберите значение правого поля так, чтобы содержимое страницы не перекрывало изображение, которое располагается по правому краю страницы.
• Задайте отступы и поля для заголовков.

Задайте одинаковое оформление для двух web-страниц по направлениям отдыха:

• Определите один стиль для всех горизонтальных границ таблицы, а другой — для всех вертикальных (значения толщины, цвета, типа границы определите самостоятельно).
• Укажите значение полей для изображений, размещенных на странице.