background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-gap
column-rule
column-width
content
counter-increment
cursor
direction
display
empty-cells
height
quotes
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
resize
right
unicode-bidi
vertical-align
visibility
z-index
Interner Explorer
-ms-radial-gradient
background-position-x
background-position-y
---------------
filter
hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox
-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome
-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила
@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации
A
#id
.class
.class1.class2
*
A B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы
:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы
::after (:after)
::before (:before)
::first-letter
::first-line
::selection
---------------
Функции
attr()
calc()
---------------
Значения свойств
Строки
Числа
Проценты
Размер
Адрес
Цвет
Угол
Медиа-запросы
inherit
initial
Помогли мы вам |
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-bottom |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле снизу от текста
Синтаксис
padding-bottom: значение | inherit
Значения
Величину нижнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding-bottom</title>
<style>
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid #000; /* Параметры рамки */
padding-bottom: 40px; /* Поле снизу от текста */
padding-top: 40px; /* Поле сверху от текста */
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet
</div>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding-bottom
Объектная модель
[window.]document.getElementById("elementID").style.paddingBottom
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
- © outline-offset
- © margin-top
- © margin-right
- © margin-left
- © margin-bottom
- © left
- © bottom
- © border-bottom-right-radius
- © border-bottom-left-radius
- © border-bottom-color
|
|
- Новости мира Интернет
- Афоризмы
- Видео уроки
- Справочник CSS
BMW iX3: электрический кроссовер с запасом хода более 400 км - «Новости сети»
Новый низкопрофильный ускоритель MSI GeForce GT 1030 имеет пассивное охлаждение - «Новости сети»
Casio уйдёт с рынка компактных фотокамер - «Новости сети»
Nokia X6 может стать первым смартфоном HMD Global с вырезом на дисплее - «Новости сети»
Развитие Интернета вещей приведёт к нехватке 200-мм производственных мощностей - «Новости сети»
Xiaomi впервые стала лидером по интернет-продажам смартфонов в России - «Новости сети»
Dell представила мобильные рабочие станции Precision нового поколения - «Новости сети»
Новые моноблоки Dell OptiPlex оснащены выдвигающейся веб-камерой - «Новости сети»
Клавиатура Xiaomi Yuemi Mechanical Keyboard Pro имеет компактное исполнение - «Новости сети»
В сервисе Ford GoBike появились электрические велосипеды - «Новости сети»
Dell OptiPlex 5060 Micro: неттоп с процессором Intel Coffee Lake - «Новости сети»

Мастерство — Обзорный ролик с Digitale-2018 - «Видео уроки - CSS»

Вебинар "Переворот экрана и сохранение состояния" - «Видео уроки - CSS»

Сколько на самом деле зарабатывают программисты? - «Видео уроки - CSS»

Что такое Custom Template и как создать свой персональный шаблон для страницы? - «Видео уроки - CSS»

Как создать свой Widget для WordPress? - «Видео уроки - CSS»

Новый Директ. Обзор новинок Яндекса на апрель 2018 г. - «Видео уроки - CSS»

Верстка в прямом эфире # 2 | Интернет магазин Aware #6 | 2018 - «Видео уроки - CSS»

ИНДИЯ #4 Гоа/Анджуна/Бунгало/Дома на деревьях/Транс музыка/День Победы/Индуизм/Водопад/Дудхсагар - «Видео уроки - CSS»

Роскомнадзор vs Telegram, ИИ от Google, Новый Gmail - «Видео уроки - CSS»

Виджеты и Сайдбары в WordPress. Создаем свой сайдбар. - «Видео уроки - CSS»

Блокировка Telegram — Суровый веб #162 - «Видео уроки - CSS»

Как работать программистом в Германии? - «Видео уроки - CSS»
! | |||
B | border-left-color | border-top | |
C | column-count | columns
|
counter-reset
|
D | E
|
H
|
Q
|
F
|
L
|
M
|
O |
P
|
W
|
T
|
text-shadow |
R | U
|
V | Z
|
Firefox | Opera | Safari и Chrome | |
-moz-border-bottom-colors
|
-moz-orient
|
-o-linear-gradient
|
-webkit-linear-gradient
|
@-правила | |||
@font-face | @media |
Селекторы и их комбинации | |||
A
|
A B
|
[attr]
|
[attr~='value']
|
Псевдоклассы | |||
:active
|
:enabled
|
:hover | :not
|
:only-child
|
:read-only | :target
|
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.