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;

<div class="grid">
  <div class="col">
    <div class="cell">
      <div class="p p0">padding: 0</div>
    </div>
    <div class="cell">
      <div class="p p1">padding: 1em</div>
    </div>
    <div class="cell">
      <div class="p p2">padding: 5% 10%</div>
    </div>
    <div class="cell">
      <div class="p p3">padding: 1em 2em 2em</div>
    </div>
    <div class="cell">
      <div class="p p4">padding: 5px 1em 0 1em</div>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: left;
}

.p {
  display: inline-block;
  background: #E4F0F5;
  border: 1px solid;
}

.p0 { padding: 0; }
.p1 { padding: 1em; }
.p2 { padding: 5% 10%; }
.p3 { padding: 1em 2em 2em; }
.p4 { padding: 5px 1em 0 1em; }

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

Navegadors compatibles

Vegeu també

• Model de caixa CSS
• La propietat abreujada padding es pot utilitzar per establir farcits en els quatre costats d'un element amb una única declaració: padding-top, padding-right, padding-bottom i padding-left.