Свойства top, left, bottom, right
С помощью данных свойств вы можете задавать расстояние между позиционированным элементом и:
Совершенно не обязательно задавать значения сразу для четырех сторон: используйте лишь те свойства, которые необходимы для перемещения элемента в нужном направлении.
В качестве значений принимаются любые единицы измерения длины в CSS. Например, вы можете установить расстояние между позиционированным элементом и сторонами браузера в размере 5% от левого края окна браузера и 40px от верхнего края окна браузера. Если расстояние задано в процентах, оно вычисляется, исходя из ширины/высоты родительского элемента. Также принимаются и отрицательные значения.
Помимо этого, можно установить значение auto (к слову, оно задано по умолчанию) и тем самым перезаписать предыдущие настройки. Обратите внимание, что значения 0 и auto не равны между собой и действуют по-разному.
Кратко рассмотрим каждое свойство:
Взгляните на серию примеров ниже, чтобы лучше понять, как ведет себя позиционированный элемент, когда к нему применяются вышеописанные свойства с различными значениями:
Рекомендуем дополнительно попрактиковаться в использовании свойств позиционирования и понаблюдать за изменениями в браузере: это именно тот случай, когда лучше один раз увидеть, чем сто раз услышать.
Далее в учебнике: свойство z-index — расположение позиционированных элементов по оси Z.
margin-top
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-top |
Версии CSS
Описание
Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от верхнего края элемента
Синтаксис
margin-top: значение | auto | inherit
Значения
Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin-top
Объектная модель
[window.]document.getElementById(» elementID «).style.marginTop
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.
CSS top Property
Example
Set the top edge of the positioned
More «Try it Yourself» examples below.
Definition and Usage
The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.top=»100px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
| Value | Description | Play it |
|---|---|---|
| auto | Lets the browser calculate the top edge position. This is default | Play it » |
| length | Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units | Play it » |
| % | Sets the top edge position in % of containing element. Negative values are allowed | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Use the top property with a negative value and for an element with no positioned ancestors:
div.c <
position: absolute;
top: 150px;
border: 3px solid green;
>
padding-top
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-top |
Версии CSS
Описание
Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле сверху от текста
Синтаксис
padding-top: значение | inherit
Значения
Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding-top
Объектная модель
[window.]document.getElementById(» elementID «).style.paddingTop
Браузеры
margin-top
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-top |
Версии CSS
Описание
Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от верхнего края элемента
Синтаксис
margin-top: значение | auto | inherit
Значения
Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin-top
Объектная модель
[window.]document.getElementById(» elementID «).style.marginTop
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.
