Справочник по CSS : Расположение элементов

Материал из Справочник Web-языков.

Перейти к: навигация, поиск
Главная  ::. CSS  ::. Расположение элементов

Содержание

[править] margin

Задает ширины полей между элементами страницы и его соседями.

Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left.

margin: {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}];

Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

[править] margin-top

Задает верхнее поле между элементом страницы и его соседями сверху.

margin-top: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

[править] margin-right

Задает правое поле между элементом страницы и его соседями справа.

margin-right: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

[править] margin-bottom

Задает нижнее поле между элементом страницы и его соседями снизу.

margin-bottom: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

[править] margin-left

Задает левое поле между элементом страницы и его соседями слева.

margin-left: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

[править] padding-top

Задает расстояние между элементом страницы и верхней границей.

pading-top: {Y}|{Y}%;

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

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

[править] padding-right

Задает расстояние между элементом страницы и правой границей.

pading-right: {X}|{X}%;

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

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

[править] padding-bottom

Задает отступ между элементом страницы и нижней границей.

pading-bottom: {Y}|{Y}%;

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

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

[править] padding-left

Задает расстояние между элементом страницы и левой границей.

pading-left: {X}|{X}%;

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

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

[править] width

Задает ширину свободно позиционирования элемента.

width: auto|{X}|{X}%;

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

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

[править] height

Задает высоту свободно позиционированного элемента.

height: auto|{X}|{X}%;

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

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

[править] top

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

top: auto|{Y}|{Y}%;

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

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

[править] bottom

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

bottom: auto|{Y}|{Y}%;

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

Значение по умолчанию auto.

Поддерживается IE начиная с 4.0

[править] left

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

left: auto|{X}|{X}%;

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

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

[править] right

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

right: auto|{X}|{X}%;

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

Значение по умолчанию auto.

Поддерживается IE начиная с 4.0

[править] float

Определяет обтекание элемента другими слева или справа вместо помещения под ним.

float: none|left|right;
  • float: none; - заставляет элемент страницы появляться там, где он задан (используется по умолчанию);
  • float: left; - принудительно выравнивает элемент страницы по левому краю;
  • float: right; - по правому краю.

Поддерживается IE начиная с 4.0 для кнопок и внедренных объектов и начиная с 5.0 - для остальных элементов страницы.

Поддерживается NN начиная с 4.0

[править] vertical-align

Задает вертикальное выравнивание элемента страницы внутри родителя.

vertical-align: auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom;
  • vertical-align: auto; - выравнивает элемент страницы согласно значению атрибута layout-flow;
  • vertical-align: baseline; - задает выравнивание базовой линии элемента страницы по базовой линии родителя (используется по умолчанию);
  • vertical-align: sub; - превращает текст в нижний индекс;
  • vertical-align: super; - превращает текст в верхний индекс;
  • vertical-align: top; - выравнивает верх элемента страницы по самому верху родителя;
  • vertical-align: text-top; - выравнивает верх текста элемента страницы по верху текста родителя;
  • vertical-align: middle; - выравнивает центр элемента страницы по центру родителя;
  • vertical-align: bottom; - выравнивает низ элемента страницы по низу родителя;
  • vertical-align: text-bottom; - выравнивает низ текста элемента страницы по низу текста родителя.

Поддерживается IE начиная с 4.0

[править] overflow

Задает поведение элемента страницы, если содержимое в нем не помещается.

overflow: visible|scroll|hidden|auto;
  • overflow: visible; - заставляет элемент страницы расшириться так, чтобы все его содержимое было видно (значение по умолчанию);
  • overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
  • overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
  • overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отобаржаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).

Поддерживается IE начиная с 4.0

[править] overflow-x

Задает поведение элемента страницы, если его ширина меньше ширины содержимого.

overflow-x: visible|scroll|hidden|auto;

Поддерживается IE начиная с 4.0

[править] overflow-y

Задает поведение элемента страницы, если его высота меньше высоты его содержимого.

overflow-y: visible|scroll|hidden|auto;

Поддерживается IE начиная с 4.0

[править] zoom

Задает масштаб отображения элемента страницы.

zoom: normal|{Масштаб}|{Масштаб}%;

Масштаб может быть задан как числом с плавающей точкой, обозначающим степень увеличения или уменьшения, так и процентной величиной. Предопределенное значение normal задает масштаб 1.0 или 100%.

Значение по умолчанию normal.

Поддерживается IE начиная с 5.5

[править] table-layout

Позволяет "зафиксировать" значения ширины ячеек таблицы.

table-layout: auto|fixed;
  • table-layout: auto; - устанавливает ширину ячейки по ширине ее содержимого (значение по умолчанию);
  • table-layout: fixed; - использует для установки ширин ячеек значения атрибутов WIDTH или, если они не заданы, просто дает ячейкам равную ширину.

Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.

Применяется только для тега <TABLE>.

Поддерживается IE начиная с 5.0

[править] Смотреть также

Личные инструменты
3.64197087288