Padding - Property CSS
Summary of characteristics of the padding property
00Computed value : during an animation, the padding property gradually changes from one value to another.Syntax diagram of padding.
padding property.The links in the diagram provide more details about the values.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
lengthis a positive or zero numeric value, followed by one of the CSS dimension units.%is a percentage calculated relative to the width of the element.
Description of the padding property.
padding defines the space between the border of an element and its content.
This means it is the inner margins, not to be confused with the outer margins, which are managed by the property margin.
padding is a shorthand property that allows you to define the four inner margins of an element in a single rule.
These can be defined individually by the properties:
padding-top: top inner margin.padding-right: right inner margin.padding-bottom: bottom inner margin.padding-left: left inner margin.
Note: padding can apply to a table or the cells of a table, but not to other inner elements of the table: headers, rows, columns, etc.
Language support.
If we want to process text in a non-Latin language, which is written for example from right to left like Arabic, or from top to bottom like Japanese, it is preferable to use the so-called 'logical' properties:
padding-block: margins at the beginning and end of the block, taking into account the direction of writing.
Short hand property equivalent to the following two:
padding-block-start: margin at the beginning of the block, taking into account the writing direction. For European languages, it is equivalent topadding-top.padding-block-end: margin at the end of the block, taking into account the writing direction. It is equivalent topadding-bottomfor European languages.
padding-inline : Margins at the beginning and end of lines, in the direction of writing.
Summarized property equivalent to:
padding-inline-start: margin at the end of lines, in the direction of writing. For Latin languages, it is equivalent topadding-left.padding-inline-end: Margin at the beginning of the line, in the direction of writing. It is equivalent topadding-rightfor Latin languages.
Refer to the property writing-mode for more details on the management of non-Latin languages.
Note: the shorthand property padding, with its four values corresponding to top, right, bottom, and left, is not dependent on the writing direction.
Here are the equivalences between physical properties and logical properties depending on the language of the text.
padding-toppadding-leftpadding-rightpadding-bottomValues for padding.
- padding: 15px 10px 10px 20px; a b c d
From one to four positive or zero numerical values, along with their dimension unit (see the CSS dimension units). The values are separated by a space. They apply to the four inner margins, according to their number and the rule defined below.
If the values are expressed as percentages, they are calculated based on the width of the parent element, including the top and bottom padding. This may come as a surprise: one might think that the percentages of vertical margins (top and bottom) are calculated relative to the height of the parent element. But this would lead to an unsolvable circular calculation: the margins depend on the height of the parent, and the latter depends on the margins.
Here is how the values are treated, depending on their number:
- If a single value is specified, it applies to all four inner margins.
- If two values are specified, the first defines the top and bottom inner margins, and the second value defines the left and right inner margins.
- When three values are indicated, they respectively define the top inner margin, the left and right inner margins, and the bottom inner margin.
- Finally, if the four values are specified, they define the margins in the following order: top inner margin, right inner margin, bottom inner margin, left inner margin.
padding:a;
Only one value
padding:a b;
Two values
padding:a b c;
Three values
padding:a b c d;
Four values - padding: initial; (
0) padding: inherit; padding: revert; padding: revertLayer; padding: unset;These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,unset.
Animation of the padding property.
The small example below consists of a main block (white background, bordered) containing another block (blue background, rounded corners).
For this second element, it would have been possible to use an image.
The animation is achieved by varying the inner margins of the main block.
A third block is the parent of this set. When a background color is applied to it, it allows to materialize the inner margins during the animation.
Manipulating the padding property programmatically.
With Javascript, change the value of padding.
In Javascript, here is how to modify the value of padding. We see that Javascript offers a syntax with the typical CSS notation,
in kebab-case, and another syntax with the notation in camel-case.
let el = document.getElementById('id');
el.style['padding'] = '2%';
// or
let el = document.getElementById('id');
el.style.padding = '2%';
With Javascript, read the value of padding.
TThis code example works if the property has been assigned directly to the element itself via its style attribute, without going through
a CSS selector. The value is returned as it was defined, with the same unit.
let el = document.getElementById('id');
let value = el.style['padding'];
// or
let el = document.getElementById('id');
let value = el.style.padding;
With Javascript, read the calculated value of padding.
The calculated value is the one that results from the evaluation of the relative units and the potential consideration of inherited values.
If no value has been assigned to padding either to the element or to any of its parents, it will be the initial value.
In the case of padding, the value is returned in pixels or percentages.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('padding');
With JQuery, change the value of padding.
$('#id').css('padding', '2%');
With JQuery, read the calculated value of padding.
As in Javascript, the value is returned in pixels or percentages.
let value = $('#id').css('padding');
Other code examples.
Other examples of Javascript and JQuery code are provided on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the property padding and then display either the values as they have been applied,
or the calculated values. This second option allows you to see how the value of padding is serialized: it is observed that percentages
are well stored as percentages, but that all other units are converted to pixels.
Simulator.
This first simulator allows you to vary the four values of padding.
The inner margins are highlighted in a blue color (in fact, it is the background color of the parent element).
The height of the element being not fixed, changing the top and bottom padding causes a change in the height of the element.
In the horizontal direction, it is the width of the content that adapts to the values of padding because the width of the element is limited.
Simulator for logical properties, sensitive to the sense of writing.
This simulator uses padding properties that are sensitive to the writing direction.
But not today, today is pony.
Browsers compatibility with padding.
The property padding, in its physical version, has existed since the very first version of CSS. It does not pose any compatibility issues.
More recent, the logical properties are however well recognized as well.
paddind, padding-top, padding-right, padding-bottom and padding-left.padding-block, padding-inline, padding-block-start, padding-block-end, padding-inline-start and padding-inline-end.properties
properties
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Chrome
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historic of the padding property.
The physical properties for defining inner margins (padding) have existed since the very first specification of the CSS language. The equivalent logical properties, supporting writing modes based on the language, were then added.
-
Cascading Style Sheets specification - Version 1
Initial definition of thepadding...properties and thepaddingshorthand property.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
Addinginheritvalue for defining paddings.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Box Model Module Level 3
No modification concerning thepadding...properties.July 26, 2001Working Draft.
December 22, 2020Candidate Recommendation.February 16, 2023Proposed for recommendation.April 06, 2023Recommendation . -
CSS Logical Properties and Values Level 1
Definition of logical properties (taking into account the writing mode depending on the language).May 18, 2017Working Draft. -
CSS Box Model Module Level 4
No modification concerning thepadding...properties.April 21, 2020Working Draft.
See also, regarding margins.
The margins (inner and outer) are described in this module of the CSS specification: CSS Box Model Module. The following definitions are also described in this same module.
Properties: