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

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

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

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

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

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

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

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

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


Заголовок <<Блочный лемент>>

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

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

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


Поля (margin)

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

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

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

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

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

Границы (border)

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

Отступы (padding)

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

Справочник

Задание

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