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; }
Initial value | as each of the properties of the shorthand: |
---|---|
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 . |
Inherited | no |
Percentages | refer to the width of the containing block |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | a length |
Canonical order | the 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
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
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!
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é
- 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
ipadding-left
.