Lez.15 - Corso Intermedio Css

SPAZIATURA nelle CELLE

La Spaziatura nelle Celle

Per separare il contenuto di una cella dal suo bordo interno si utilizza la proprietà pedding: valore;

Vediamo in pratica il concetto espresso:
- padding: 10px; spaziamo il contenuto delle celle di 10px su tutti e quattro i lati

- padding: 10px 0px; spaziamo di 10px il contenuto delle celle dal lato superiore e dal lato inferiore, e di 0px dai due lati laterali.

padding: 10px 0px 20px; spaziamo di 10px il contenuto delle celle dal lato superiore, di 0px i due lati laterali, e di 20px il lato inferiore.

padding: 10px 0px 20px 5px; diamo una spaziatura per tutti e quattro i lati e la diamo in senso orario, in sintesi il primo valore è la spaziatura in alto, il secondo è la spaziatura laterale destra, il terzo è la spaziatura inferiore, il quarto è la spaziatura laterale sinistra.
Se volessimo specifiare solo un lato seguiamo la sintassi:
- padding-left: valore;

- padding-right: valore;

- padding-top: valore;

- padding-bottom: valore;

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Spaziatura nelle celle</title>
  <meta charset="utf-8">
  <style type="text/css">
	body {
		background-color: aqua;
	}
	table {
		background-color: yellowgreen;
		font-size: 2m;
		width: 200px;
		height: 200px;
	}
	th {
		background-color:skyblue;
		height: 40px;
		border: 4px red solid;
	}
	table, td {
		border: 4px red solid;
		border-collapse: collapse;
	}
	td {
		padding-left: 20px;
	}
  </style>
 </head>
 <body>			    
   <h1>Spaziatura nelle celle</h1>
   <table>
	<tr>
		<th>Mese</th><th>Vendite</th>
	</tr>
	<tr>
		<td>Gennaio</td><td>10</td>
	</tr>
	<tr>
		<td>Febbraio</td><td>20</td>
	</tr>
	<tr>
		<td>Marzo</td><td>30</td>
	</tr>
   </table>
 </body>               
</html>