In questo articolo spiegherò brevemente come usare il padding del css nelle pagine web, fornendo un mini-tutorial completo di codice css d’esempio.
Cos’è il padding?
“Padding” in inglese significa “imbottitura” generalmente e nel css indica un comando che permette di generare un certo quantitativo di spazio che circondi il contenuto preso in consierazione; è molto utile per definire gli spazi all’interno di una pagina web e rappresenta uno dei comandi più usati del css. Spesso il padding è abbinato al comando che definisce i bordi dell’elemento, consentendo di delineare ancora meglio la divisione fra gli spazi interessati fra i vari elementi che compongono la pagina web.
Che codice usare per il padding col css?
Prima di tutto è giusto impostare il tag “<style>” per poter indicare che stiamo usando il codice css per modificare lo stile di una pagina web o di un suo dato elemento. A questo punto chiamiamo il div e scriviamo quindi il comando “div { padding: 100px; border: 2px solid #4CAF50; }” (nell’esempio sottostante di codice è scritto nel modo giusto per l’inserimento nelle righe di codice): questo comando ci permette di impostare la grandezza del riquadro di padding (100px) mentre la parte “border” consente di scegliere la possibilità di impostare un bordo con tanto di spessore (2px in questo caso), forma geometrica (solid) e colore (#4CAF50).
Esempio codice padding con bordo in css
<style>
div { padding: 100px;
border: 2px solid #4CAF50;
}
</style>
<div>Il souvlaki di Atene si chiama kalamaki ed è molto buono.</div>
Come impostare una classe css per il padding con bordo
Non sei ancora del tutto convinto dall’esempio di codice css riportato di sopra? In realtà possiamo anche definire le classi per un dato elemento, ad esempio in questo caso definiremo la classe “souvlaki1” e “souvlaki2”.
Ecco un esempio di codice per capire bene come funziona il padding css con bordo anche per le classi:
<head>
<style>
.souvlaki1 {
padding: 30px;
border: 4px solid #0000FF;
}
.souvlaki2 {
padding: 10px;
border: 1px solid #0000FF;
}
</style>
</head>
<body>
<div class=”souvlaki1″><h4>Il souvlaki è meraviglioso</h4></div>
<div class=”souvlaki2″><h4>Il souvlaki kalamaki è gustosissimo</h4></div>
</body>
</html>
PS se vuoi copiare e reincollare questo codice nella tua pagina di esempio presta attenzione al carattere della virgolette “: può capitare infatti che copiandolo direttamente venga incollato un carattere diverso che genera errori nel broweser, il consiglio è di riscrivere ” a mano dopo aver reincollato questo codice d’esempio nel caso.