Il padding in CSS serve a creare uno spazio intorno al contenuto di un elemento, all’interno dei bordi: è diverso dal margine di un elemento in CSS. Nell’immagine qui sotto, il padding è indicato in azzurro, mentre il margine in grigio.
Dunque, la differenza tra il padding e il margin è che la distanza avviene all’interno dei bordi e non fuori.
Esempio
Vediamo l’esempio qui sotto, realizzato con un titolo h1.
<h1 style ="padding-left:30px">Hello padding</h1><p>Hello World!</p>Hello padding
Hello World!
Sintassi
Come avrai notato, la sintassi del comando padding è molto simile a quella del comando margin. Anche in questo caso avrai:
padding-top:distanza dall’alto;padding-left:distanza da sinistra;padding-right:distanza da destra;padding-bottom:distanza dal basso;padding:sintassi abbreviata.
selettore {padding-top: valore}Il valore può essere espresso in due modi:
- un valore numerico, seguito da un’unità di misura (ad esempio px);
- un valore in percentuale.
div {padding-top:30%;}
p {padding-left:40%;}Sintassi abbreviata
Nella sintassi abbreviata, è possibile definire un padding per tutti e 4 i lati:
div {padding:50%;}avremo un padding-top del 50%, così come il padding-left, il padding-right e il padding-bottom.
Oppure, è possibile digitare direttamente i lati:
div {padding: top, left, right, bottom;}è possibile anche specificare due dimensioni soltanto:
div {padding: topbottom, leftright,;}non fa altro che definire un valore per la distanza dall’alto e dal basso e un altro per la distanza da sinistra e da destra.
Altri Esempi
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
box-sizing: border-box;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width - with box-sizing</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
</body>
</html>Padding and element width – with box-sizing
Fonte: https://www.w3schools.com/css/css_padding.asp
Blogger e scrittore ventenne nato a Taranto. Collabora con diverse agenzie di marketing digitale e operativo. Ha pubblicato il manuale Windows 10: Guide e Soluzioni e il libro di narrativa storica Cronache di un Palazzo Abbandonato.
