Html body padding bottom

padding-bottom

Свойство CSS padding-bottom устанавливает высоту области заполнения внизу элемента.

Try it

Область набивки элемента-это пространство между его содержимым и его границей.

Примечание. Свойство padding можно использовать для установки отступов на всех четырех сторонах элемента с помощью одного объявления.

Syntax

 / * значения * / padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; / * значение * / padding-bottom: 10%; / * Глобальные значения * / padding-bottom: inherit; padding-bottom: initial; padding-bottom: revert; padding-bottom: revert-layer; padding-bottom: unset;

Свойство padding-bottom указывается как одно значение, выбранное из списка ниже. В отличие от полей, отрицательные значения не допускаются для заполнения.

Values

Размер набивки как фиксированное значение.Должно быть,отрицательное.

Размер отступа в процентах относительно встроенного размера ( ширина в горизонтальном языке, определяемая writing-mode ) содержащего блока . Должен быть неотрицательным.

Formal definition

Initial value	0
Applies to	все элементы, кроме table-row-group , table-header-group , table-footer-group , table-row , table-column-group и table-column . Это также относится к ::first-letter и ::first-line .
Inherited	no
Percentages	относиться к ширине содержащего блока
Computed value	процентное соотношение или абсолютная длина
Animation type	a length

Formal syntax

padding-bottom = length-percentage [0,∞]> length-percentage> = length> | percentage> 

Examples

Установка нижнего отступа с помощью пикселей и процентов

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

Specifications

Источник

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> 

Источник

padding-bottom

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

Рис. 1. Поле снизу от текста

Краткая информация

Синтаксис

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства padding-bottom

Объектная модель

Объект.style.paddingBottom

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

Спецификация	Статус
CSS Basic Box Model	Рабочий проект
CSS Transitions	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :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
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• 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
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Источник