padding-top
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Частично |
|
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS1, CSS2.1 |
|
0 |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/box.html#propdef-padding- |
Ссылка на |
|
спецификацию |
top |
|
|
Описание
Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле сверху от текста
Синтаксис
padding-top: значение | inherit
Значения
Величину верхнего поля можно указывать в пикселах (px), процентах (%) или другихдопустимыхдля CSS единицах. Значение inherit указывает, что оно наследуется у родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>padding-top</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border-top: 5px solid #000; /* Параметры верхней линии */ border-bottom: 5px solid #000; /* Параметры нижней линии */ padding: 5px; /* Поля вокруг текста */
padding-top: 10%; /* Поле сверху */ padding-bottom: 10%; /* Поле снизу */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-top
Объектная модель
[window.]document.getElementById("elementID").style.paddingTop
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
position
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Частично |
|
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS2 |
|
static |
Значение по умолчанию |
|
|
Да |
Наследуется |
|
|
Ко всем элементам, за исключением генерируемых |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
|
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-position
Описание
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
absolute
Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на вебстранице словно абсолютно позиционированного объекта и нет. Положение элемента задается свойствами left, top, right и bottom относительно края окна браузера.
fixed |
По своему действию это значение близко к absolute, но в отличие от него привязывается к |
|
указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения |
|
при прокрутке веб-страницы. Браузеры Netscape и Firefox вообще не отображают полосы |
|
прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком |
|
в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не |
|
влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данное значение. |
relative |
Положение элемента устанавливается относительно его исходного места. Добавление |
|
свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную |
|
сторону от первоначального расположения. |
static |
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не |
|
приводит к каким-либо результатам. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>position</title>
</head>
<body>
<div style="font-family: Times, serif; font-size: 200%"> T<span style="position: relative; top: 10px">E</span>X
и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span style="position: relative; top: 10px">E</span>X
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства position
Объектная модель
[window.]document.getElementById("elementID").style.position
Браузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.