This translation is incomplete. Please help translate this article from English.

La propietat CSS padding estableix l'àrea de farcit als quatre costats d'un element. És una abreviatura que estableix tots els farcits individuals alhora: padding-top, padding-right, padding-bottom i padding-left.

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 1em;

/* Global values */
padding: inherit;
padding: initial;
padding: unset;

Initial valueas each of the properties of the shorthand:
Applies toall 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.
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valueas each of the properties of the shorthand:
  • 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
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxi

La propietat padding es pot especificar utilitzant un, dos, tres o quatre valors. Cada valor és un <length> o un <percentage>.

  • Quan s'especifica un valor, s'aplica el mateix farcit als quatre costats.
  • Quan s'especifiquen dos valors, el primer farcit s'aplica a la part superior i inferior, el segon a l'esquerra i a la dreta.
  • Quan s'especifiquen tres valors, el primer farcit s'aplica a la part superior, el segon a l'esquerra i a la dreta, el tercer a la part inferior.
  • Quan s'especifiquen quatre valors, els farcits s'apliquen a la part superior, dreta, inferior i esquerra en aquest ordre (en el sentit de les agulles del rellotge).

Valors

length
La grandària del farcit com a valor fix. Ha de ser no negatiu.
percentage
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.

Sintaxi formal

[ <length> | <percentage> ]{1,4}

Exemples

Exemple senzill

HTML

<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Més exemples

padding: 5%;                /* all sides: 5% padding */

padding: 10px;              /* all sides: 10px padding */

padding: 10px 20px;         /* top and bottom: 10px padding */
                            /* left and right: 20px padding */

padding: 10px 3% 20px;      /* top:            10px padding */
                            /* left and right: 3% padding   */
                            /* bottom:         20px padding */

padding: 1em 3px 30px 5px;  /* top:    1em padding  */
                            /* right:  3px padding  */
                            /* bottom: 30px padding */
                            /* left:   5px padding  */ 

Especificacions

Especificació Estat Comentari
CSS Basic Box Model
The definition of 'padding' in that specification.
Working Draft No canvia.
CSS Level 2 (Revision 1)
The definition of 'padding' in that specification.
Recommendation No canvia.
CSS Level 1
The definition of 'padding' in that specification.
Recommendation Definició inicial.

Navegadors compatibles

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (Yes) 1.0 (1.0) 4.0 3.5 1.0 (85)
Descripció Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic ? (Yes) ? ? ? ?

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,