Lez.1 Corso Intermedio Css

Box Model e le Proprietà: padding, border, margin, in un foglio di stile Css

Box Model e le proprietà: padding - border - margin

Box Model: padding - border - margin
In questa prima lezione del corso intemedio del css introduciamo un argomaneto molto importante che riguarda le dimensioni reali di un elemento.

Sappiamo bene che l'elemento dovrà essere posizionato nella nostra pagina web con delle dimensione ben precise. Dato che la nostra pagina sarà composta da vari elementi e tutti questi elementi saranno incastrati e posizionati tra di loro in maniera perfetta, risulta chiaro, che devono essere incasellati uno vicino all'altro con delle misure ben precise e devono essere le misure che l'elemento occupa realmente altrimenti la pagina non verrà visualizzata correttamente.

Le dimensioni reali occupate da un elemento vengono influenzate da questi fattori:
border

padding

margin

Il border

è lo spessore della linea che fa da limite del box.

Il padding

o spaziatura interna, è lo spazio che separa il contenuto dell'oggetto dal suo border

Il margin

è la spaziatura esterna che separa l'oggetto dagli altri oggetti vicini ad esso contenuti nella stessa pagina.
Quindi le reali dimensioni visibili dell'oggetto sono:
l'elemento stesso + il panding + lo spessore del border.

Mentre il margin è lo spazio invisibile, cioè che non fa parte della grafica dell'elemento.

Il margin intorno all'oggetto comunque c'è ed influisce sullo spazio occupato dall'oggetto nella pagina, è uno spazio che c'è ma non vediamo fisicamente.

Sintassi con esempio del codice:

#elemento {border: 60px solid green;}

#elemento {padding: 70px;}

#elemento {margin: 100px;}

Il margin è soggetto a particolari regole che vedremo più avanti.

Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Box Model</title>
  <meta charset="utf-8">
  <style type="text/css">
    #elemento {
          background-color: grey;
    	  width: 300px;
          border:60px solid green;
    	  padding: 70px;
    	  margin: 100px;
    }
  </style>
 </head>
 <body>			    
   <h1>Box Model: padding - border - margin</h1>
   <div id="elemento">
	   contenitore              
   </div>
 </body>               
</html>