You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
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
[ <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
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
.