Lez.3 - Corso Intermedio Css

Il Margine degli Elementi e la Proprietà margin in un foglio di stile Css

Il Margine degli Elementi: la proprietà margin

Il margine degli elementi è una spaziatura esterna agli elementi che compongono la nostra pagina web.

Cominciamo col dire che per impostazione predefinita c'è sempre un piccolo margine nel body.
Per questo motivo non vediamo l'elemento appicicato al bordo della pagina. Per poter vedere l'elemento appiccicato al bordo della pagina dobbiamo togliere quel piccolo margine al body, per poterlo fare diamo il valore zero al margin del body:
body {margin:0px;}

IMPORTANTE Ricordate che per quanto riguarda il margine, la larghezza e l'altezza dell'elemento non vengono modificate, ma viene modificato lo spazio occupato dall'elemento nella pagina.

Nella Notazione Semplificata ci sono quattro modi per dare dei valori al margine e sono:
margin:10px; questo valore si intende per i 4 lati dell'elemento.
margin:10px 20px; mettendo due valori si intende che assegno 10px di margine sul lato superiore e inferiore e 20px di margine sul lato destro e sinistro dell'elemento.

margin:10px 20px 0px; se inserisco tre valori vuol significare che assegno 10px di margine sul lato superiore, 20px di margine sul lato sinistro e destro, e 0px di margine sul lato inferiore.

margin:10px 20px 0px 30px; se inserisco quattro valori si intende che assegno 10px di margine sul lato superiore, 20px di margine sul lato destro, 0px di margine sul lato inferiore, 30px di margine sul lato sinisto.

IMPORTANTE. Nel caso di due elementi di blocco sovrapposti i margini verticali collassano e vince il più grande dei due.

IMPORTANTE. Nel caso di elementi di blocco annidati, cioè uno dentro l'altro, ci sono dei problemi di margini che collassano. Per risolverli o applichiamo un bordo, oppure all'elemento padre applichiamo la proprietà overflow.

Da notare che gli elementi di linea (tipo le immagini) si affiancano tra di loro se lo spazio del contenitore lo permette, a differenza degli elementi di blocco che i margini verticali collassano e vince il più grande dei due,
per gli elementi di linea i margini verticali e anche i margini orizzontali si sommano.

Il margin ha diversi valori oltre ai valori che assegnamo con le unità di misura fisse e le unità di misura relative.
Un'altro valore di margin è:
auto il valore auto fa si che all'elemento venga applicato un margine in automatico. Con auto l'elemento viene centrato nella pagina in maniera relativa e solo in orizzontale.

Altro valore di margin è:
inherit inherit indica che il margine dell'elemento viene ereditato dal suo elemento padre.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Margin</title>
  <meta charset="utf-8">
  <style type="text/css">
	body {
		margin:0px;
	}
	div {
		background-color: cyan;
		width: 200px;
		height: 200px;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	h2 {
		background-color: cyan;
		width: 200px;
		height: 200px;
		margin: 0;
		margin-top: 30px;
	}
  </style>
 </head>
 <body>			    
	<h1>Margin</h1>
	<div>
		Contenuto del div .......
	</div>
	<h2>Testo in un tag h2, quindi altro elemento di blocco.</h2>
	Questo testo è fuori da elementi di blocco.
 </body>               
</html>