CSS
Imbottitura
Ricerca…
Sintassi
- padding: length | initial | inherit | unset;
- padding-top: length | initial | inherit | unset;
- padding-right: length | initial | inherit | unset;
- padding-bottom: length | initial | inherit | unset;
- padding-left: length | initial | inherit | unset;
Osservazioni
1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN
Vedi anche questa domanda , "Perché i CSS non supportano il padding negativo?" e le sue risposte.
Inoltre, si prega di prendere in considerazione The Box Model quando si utilizza il padding. A seconda del valore di dimensionamento della casella, il riempimento su un elemento può o aggiungere all'altezza / larghezza precedentemente definita di un elemento o meno.
Proprietà correlate:
Il riempimento degli elementi in linea si applica solo a sinistra ea destra dell'elemento e non in alto e in basso, a causa delle proprietà di visualizzazione intrinseche degli elementi in linea.
Imbottitura su un lato
La proprietà padding imposta lo spazio di riempimento su tutti i lati di un elemento. L'area di riempimento è lo spazio tra il contenuto dell'elemento e il suo bordo. I valori negativi non sono ammessi.
Puoi specificare una parte individualmente:
-
padding-top -
padding-right -
padding-bottom -
padding-left
Il seguente codice aggiungerebbe un padding di 5px all'inizio del div:
<style>
.myClass {
padding-top: 5px;
}
</style>
<div class="myClass"></div>
Stenografia di imbottitura
La proprietà padding imposta lo spazio di riempimento su tutti i lati di un elemento. L'area di riempimento è lo spazio tra il contenuto dell'elemento e il suo bordo. I valori negativi non sono ammessi.
Per salvare l'aggiunta di padding su ciascun lato individualmente (usando padding-top , padding-left ecc.) Puoi scriverlo come una stenografia, come di seguito:
Quattro valori :
<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"></div>
Tre valori :
<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>
Due valori :
<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>
Un valore :
<style>
.myDiv {
padding: 25px; /* top/right/bottom/left */
}
</style>
<div class="myDiv"></div>
