CSS padding-top
La proprietà CSS3 padding-top imposta la spaziatura interna superiore
La proprietà padding-top in CSS3 viene utilizzata per inserire spazio interno tra il bordo superiore dell’elemento e il suo contenuto. È particolarmente utile per controllare la distanza verticale e migliorare l'equilibrio visivo degli elementi.
Sintassi
Significato dei valori principali:
-
lunghezza: imposta una quantità di spazio nella parte superiore. Esempi:
10px,1.5em,5%. -
percentuale (%): calcolata in base alla larghezza dell’elemento contenitore.
-
valori negativi: non sono validi per
padding-top.
Esempio proprietà: padding-top
Codice Esempio: padding-top
.padding-top-example {
background-color: #dc143c;
color: white;
font-size: 20px;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 2px solid #333;
border-radius: 6px;
width: 70%;
text-align: center;
margin: auto;
}
Contenuto Esempio: padding-top
Esempio di utilizzo di padding-top
In questo esempio, padding-top viene utilizzato per creare spazio interno sopra il contenuto di un elemento:
CSS e HTML per l'elemento con padding-top:
<style>
.padding-top-example {
background-color: #dc143c;
color: white;
font-size: 20px;
padding-top: 40px; /* Spazio interno sopra il contenuto */
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
border: 2px solid #333;
border-radius: 6px;
width: 70%;
text-align: center;
margin: auto;
}
</style>
<div class="padding-top-example">
Elemento con padding-top di 40px
</div>
Leggenda Proprietà:
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
