Lez.5 - Corso Intermedio Css

Il Cotorno degli Elementi la proprietà outline in un foglio di stile Css

Il Cotorno degli Elementi la Proprietà outline

Il bordo non è l'unico tipo di contorno che possiamo assegnare ai nosti elementi html, esiste un'altro tipo di contorno chiamato outline (contorno).
Outline a differenza del bordo va ad occupare uno spazio che in realtà non influisce sulle dimensione dell'oggetto stesso.
La sintassi di outline è la stessa di border:
outline: 50px solid red;

Ora cerchiamo di capirne il concetto descrivendo il codice sottostante.
Per prima cosa notiamo che l'oggetto non si sposta, il contorno viene applicato regolarmente, e la zona rossa, quella sopra, che non si vede è solo perché esce fuori dalla pagina stessa.

Ora per vedere come si comporta outline provate a cambiare il margin del div in questione in questa maniera:
margin: 100px auto; quindi vediamo che se gli applichiamo un margine, lo dotiamo di una spaziatura verso l'esterno e la facciamo di 100px in verticale, e auto in orizzontale per centrarlo nella pagina, ci rendiamo conto che esce tutto il contorno e salta fuori anche l'oggetto sotto.

Per fare un riepilogo: l'oggetto ha un bordo di 50px per lato di colore nero, questo influisce sulla sua dimensine e quindi sullo spazio occupato.
All'esterno del bordo vado a dare un outline di 50px. L'outline a differenza del border non occupa spazio, quindi se io avessi due oggetti attaccati vedrei che il bordo di tutti e due gli oggetti sarebbe distinguibile ma l'outline si fonderebbe con l'outline dell'altro oggetto di fianco.
IMPORTANTE dando una dimensione X al margine come: margin: Xpx Xpx; il margine sposta l'elemento non modificandone la dimensione, mentre dando una dimensione X ad outline come: outline: Xpx solid cyan; non sposta l'elemento e se la dimensione X è molta alta copre l'elemento vicino.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Border</title>
  <meta charset="utf-8">
  <style type="text/css">
	div {
	     background-color: cyan;
	     width: 200px;
	     height: 200px;
	     margin: 50px 50px;
	     outline: 100px solid red;
	     border: 50px solid black;
	   }
	h1 {
	     background-color: yellow;
	     margin-left: 150px;
	     outline: 75px solid cyan;
	   }
	h2 {
	     background-color: chartreuse;
	     outline: 50px solid green;
	     margin: 50px;
	   }
  </style>
 </head>
 <body>			    
	<div>
		Contenuto del div
	</div>
	<h1>Outline 1</h1>
	<h2>Outline 2</h2>
 </body>               
</html>