Отступы, поля, позиционирование

Свойство

Характеристика свойства

margin

Задает поля между блоками:{margin-top} [{margin-right}] [{margin-bottom}][{margin-left}]; Когда задано одно значение, оно применяется ко всем четырем полям. Если два значения – первое относится к верхнему и нижнему полю, а второе – к левому и правому. При трех заданных значениях первое применяется к верхнему полю, второе – к левому и правому, третье – к нижнему.

margin-top

Задает поле сверху как абсолютной величиной, так и процентом от высоты родителя: auto|{Y}|{Y}%;

margin-right

Задает поле справа: auto|{X}|{X}%;

margin-bottom

Задает поле снизу: auto|{Y}|{Y}%;

margin-left

Задает поле слева: auto|{X}|{X}%;

padding

Задает отступ между элементом страницы и границами: {X}|{X}%;

padding-top

Задает отступ до верхней границы: {Y}|{Y}%;. Значение по умолчанию 0 для тега <td> 1.

padding-right

Задает отступ до правой границы: pading-right: {X}|{X}%;

padding-bottom

Задает отступ до нижней границы: pading-bottom: {Y}|{Y}%;

padding-left

Задает Отступ до левой границы: pading-left: {X}|{X}%;

width

Задает ширину свободно позиционированного элемента: auto|{X}|{X}%;

height

Задает высоту свободно позиционированного элемента: auto|{X}|{X}%;

position

static – блок позиционируется в соответствии с основным потоком форматирования; relative – положение блока вычисляется; absolute - положение блока указывается с помощью свойств left, top, right и bottom относительно контейнера; fixed – положение блока рассчитывается по алгоритму, используемому для схемы absolute, но после позиционирования блок «привязывается» либо к области просмотра, либо к странице

top

Задает вертикальную позицию верхней границы элемента относительно родителя: auto|{Y}|{Y}%;

bottom

Задает вертикальную позицию нижней границы элемента относительно родителя. bottom: auto|{Y}|{Y}%;

left

Задает горизонтальную позицию левой границы элемента относительно родителя. left: auto|{X}|{X}%;

right

Задает горизонтальную позицию правой границы элемента относительно родителя. right: auto|{X}|{X}%;

float

Определяет обтекание элемента другими слева или справа вместо помещения под ним. float: none|left|right;

clear

Устанавливает, с какой стороны элемента запрещено его обтекание. Если задано обтекание элемента с помощью float, то clear отменяет его действие. clear: none | left | right | both | inherit

clip

rect(Y1, X1, Y2, X2) | auto | inherit определяет прямоугольник для позиционированного элемента, в котором будет показано его содержимое. Все, что не помещается в эту область, будет обрезано; clip работает только для абсолютно позиционированных элементов

display

Определяет, как элемент должен быть показан в документе: none|block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group. none – скрыть блок, освободив место; block – начать и закончить блок с новой строки; inline – считать блок одним из символов текстовой строки; inline-block – с виду inline, а внутри – block; list-item –элемент списка; run-in – начинается как block, заканчивается как inline; inline-table – таблица с внешними свойствами как inline; table – позиционируется как таблица

max-height

Устанавливает максимальную высоту элемента: значение | проценты | none | inherit

max-width

Устанавливает максимальную ширину элемента: значение | проценты | none | inherit

min-height

Задает минимальную высоту элемента: значение | проценты | inherit

min-width

Устанавливает минимальную ширину элемента: значение | проценты | inherit

overflow

Управляет отображением содержания блока, если оно выходит за область заданных размеров: auto | hidden | scroll | visible | inherit; visible – отображается все содержание, даже за пределами области; hidden – отображается только область внутри элемента; scroll – добавляются полосы прокрутки; auto – полосы прокрутки добавляются только при необходимости; inherit – наследует значение родителя

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента место, которое элемент занимает, остается за ним: visible | hidden | collapse | inherit

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Значение: число | auto | inherit. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше