Lez.6 - Corso Intermedio Css

Padding - Imbottitura degli Elementi e la proprietà padding in un foglio di stile Css

Imbottitura degli Elementi il padding

Il padding di un elemento è una proprietà che consente di impostare una spaziatura interna all'elemento stesso.

La spaziatura interna di un elemento html è la spaziatura che separa il contenuto dal suo bordo.
E' molto utile quando si devono creare dei blocchi di testo, che siano dei div o dei paragrafi o qualcos'altro, e non vogliamo che il testo resti appiccicato al bordo del suo contenitore. Impostando un padding il testo si separerà in maniera gradevole dal suo bordo.

IMPORTANTE. Il padding modifica la larghezza e l'altezza effettiva di un elemento.

Assegnando un padding ad un elemento, l'elemento di fatto aumenta il suo spazio e le sue dimensioni effettive e visibili su tutti e quattro i lati aumentando la sua dimensine del valore del padding che gli abbiamo assegnato.

Esempio: se diamo un padding ad un paragrafo, di 10px l'elemento avrà l'altezza del testo più l'altezza del padding aumentata di 20px; mentre la larghezza aumenterà di 10px a sinistra del testo più 10pz a destra del testo.
IMPORTANTE. Altra considerazione da fare è che se vogliamo un padding omogeneo su tutti e quattro i lati dobbiamo togliere il margine al paragrafo, in questa maniera - margin: 0pz; questo perchè il paragrafo si porta dietro un suo margine in verticale, e quindi se vogliamo un padding omogeneo dobbiamo togliere il suo margine.

Vediamo questo nel codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Padding</title>
  <meta charset="utf-8">
  <style type="text/css">
     div {
	    background-color: cyan;
	    width: 400px;
	    border: 2px solid black;
	    padding: 10px;
       }
     p  {
	    background-color: yellow;
	    margin: 0px;
      }
  </style>
 </head>
 <body>			    
    <div>
	    Contenuto del div
    </div>
    <h1>Padding (imbottitura)</h1>
 </body>               
</html>