padding | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Пятница, 09.12.2016
Главная » Справочник CSS3 » Свойства отступов


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


padding | Свойство CSS

Свойство padding устанавливает отступ внутреннему элементу.




Свойство padding это сокращённый способ установить параметры отступов для всех четырёх сторон элемента.Не путать со свойством margin устанавливающим внешний отступ от родительского элемента. Здесь имеется в виду элемент 1 в котором находится элемент 2, так вот свойство padding указывает в 1 элементе внутренние отступы от своих краёв для элемента 2. Для более объективного сценария указывайте расширенные свойства padding. Если вы хотите применить несколько значений расширенных свойств для padding, прописывайте их через пробел, можно указать от одного до четырёх значений. Дополнительно, существует порядок установки расширенных свойств, свойства устанавливаются по часовой стрелке начиная с верхней части.
Порядок установки расширенных свойств:
1.padding-top
2.padding-right
3.padding-bottom
4.padding-left
Свойство применимо ко всем элементам, создано в версии CSS1 но проходит проверку на валидность для версии CSS3.





Расширенные свойства padding

СвойствоОписание
padding-topУстанавливает отступ от верхней части элемента
padding-rightУстанавливает отступ от правой части элемента
padding-bottomУстанавливает отступ от нижней части элемента
padding-leftУстанавливает отступ от нижней части элемента


Дополнительные значения padding

ЗначениеОписание
0Убирает отступы у элемента
<Процент>Устанавливает отступ исходя из процентного соотношения с элементом
<Число>Устанавливает отступ с применением числовых значений
1Одно процентное или числовое значение устанавливает отступ для всех четырёх сторон относительно элемента
1 2Два числовых или процентных значения,через пробел устанавливает отступ для верхней и нижней ( первое значение ),для правой и левой ( второе значение ) сторон элемента
1 2 3Три числовых или процентных значения,через пробел устанавливает отступ для верхней ( первое значение ),для правой и левой ( второе значение ),для нижней ( третье значение) стороны элемента
1 2 3 4Четыре числовых или процентных значения,через пробел устанавливает отступ для верхней ( первое значение ),для правой ( второе значение ),для нижней ( третье значение) и для левой ( четвёртое значение ) стороны элемента
autoБраузер сам определяет отступ для элемента,разумеется применяйте если понимаете смысл и свойства наследования


Свойство работает в браузерах



Пример применения свойства padding

<html lang="ru">
<head>
<title>Свойство padding</title>
<meta charset="utf-8">
<style type="text/css">
<!--
div.roditel {
display:block;
position:absolute;
border:15px solid #0ba1d5;
}
div {
padding:10px 20px 30px 40px;
display:block;
border:15px solid #0ba1d5;
}
-->
</style>
</head>
<body>
<div class="roditel">
<div><img src="http://delaisait.ucoz.ru/css/demo/img/css3_background-repeat.jpg"></div>
</div>
</body>
</html>


Пример в действии



Поэкспериментируйте сами




Русские шрифты






Источник: http://www.w3.org/TR/CSS21/box.html#propdef-padding
Категория: Свойства отступов | Добавил: IZOTOP (15.04.2012) | Автор: Меренков Михаил W
Просмотров: 874 | Теги: css, отступ, свойство, padding, style, что означает, что это | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]