Свойство padding bottom css

padding

Внутренний отступ, от края элемента до вложенного в него контента.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство padding — или внутренний отступ — позволяет оттолкнуть контент от границ родительского элемента.

Само свойство padding это шорткат, позволяющий задать отступы сразу со всех четырёх сторон.

Можно управлять отступами по отдельности при помощи свойств padding — top , padding — left , padding — right , padding — bottom .

Или при помощи логических свойств padding — block , padding — block — start , padding — block — end , padding — inline , padding — inline — start , padding — inline — end .

Пример

Скопировать ссылку «Пример» Скопировано

   
Сублимация, как бы это ни казалось парадоксальным, .
   div class="parent"> p class="content">Сублимация, как бы это ни казалось парадоксальным, . p> div>    Скопировать Скопировано Не удалось скопировать   

Для наглядности зададим фон родителю:

 .parent  background-color: #2E9AFF;> .parent  background-color: #2E9AFF; >    Скопировать Скопировано Не удалось скопировать   

🛠 Попробуй менять размеры окна браузера и понаблюдать за поведением обоих блоков. Первый будет всегда сохранять пропорции 16:9, а вот второй всегда будет высотой 200 пикселей.

Таблица значений padding-bottom для разных стандартных соотношений сторон:

Источник

padding

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

Try it

An element’s padding area is the space between its content and its border.

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Apply to all four sides */ padding: 1em; /* top and bottom | left and right */ padding: 5% 10%; /* top | left and right | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /* Global values */ padding: inherit; padding: initial; padding: revert; padding: revert-layer; padding: unset; 

The padding property may be specified using one, two, three, or four values. Each value is a or a . Negative values are invalid.

• When one value is specified, it applies the same padding to all four sides.
• When two values are specified, the first padding applies to the top and bottom, the second to the left and right.
• When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom.
• When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).

Values

The size of the padding as a fixed value.

The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode ) of the containing block.

Formal definition

• padding-bottom : 0
• padding-left : 0
• padding-right : 0
• padding-top : 0

• padding-bottom : the percentage as specified or the absolute length
• padding-left : the percentage as specified or the absolute length
• padding-right : the percentage as specified or the absolute length
• padding-top : the percentage as specified or the absolute length

Formal syntax

Источник

padding-bottom

The padding-bottom CSS property sets the height of the padding area on the bottom of an element.

Try it

An element’s padding area is the space between its content and its border.

Note: The padding property can be used to set paddings on all four sides of an element with a single declaration.

Syntax

/* values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* value */ padding-bottom: 10%; /* Global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: revert; padding-bottom: revert-layer; padding-bottom: unset; 

The padding-bottom property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

Values

The size of the padding as a fixed value. Must be nonnegative.

The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode ) of the containing block. Must be nonnegative.

Formal definition

Initial value	0
Applies to	all elements, except table-row-group , table-header-group , table-footer-group , table-row , table-column-group and table-column . It also applies to ::first-letter and ::first-line .
Inherited	no
Percentages	refer to the width of the containing block
Computed value	the percentage as specified or the absolute length
Animation type	a length

Formal syntax

Examples

Setting padding bottom with pixels and percentages

.content  padding-bottom: 5%; > .sidebox  padding-bottom: 10px; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Introduction to the CSS basic box model
• padding-top , padding-right , padding-left and the padding shorthand
• The mapped logical properties: padding-block-start , padding-block-end , padding-inline-start , and padding-inline-end and the shorthands padding-block and padding-inline

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

padding-bottom¶

Свойство padding-bottom устанавливает значение поля от нижнего края содержимого элемента.

Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12

/* values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* value */ padding-bottom: 10%; /* Global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; 

Значения¶

Величину нижнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

 html> head> meta charset="utf-8" /> title>padding-bottomtitle> style> .layer  background: #fc3; /* Цвет фона */ border: 2px solid #000; /* Параметры рамки */ padding-bottom: 40px; /* Поле снизу от текста */ padding-top: 40px; /* Поле сверху от текста */ text-align: center; /* Выравнивание по центру */ > style> head> body> div class="layer"> Фотосинтетический бромид серебра: предпосылки и развитие div> body> html> 

Источник