padding

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 value (en-US)as 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 and ::first-line.
Inherited (en-US)no
Percentagesrefer to the width of the containing block
Computed value (en-US)as 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

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 (en-US)
La grandària del farcit com a valor fix. Ha de ser no negatiu.
percentage (en-US)
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.

Sintaxi formal

[ (en-US) <length> (en-US) | (en-US) <percentage> (en-US) ] (en-US){ (en-US)1,4} (en-US)

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.		 Candidate Recommendation 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

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é