Lez.2 - Corso Intermedio Css

Dimensione degli Elementi: la Proprietà height e width in un foglio di stile Css

Dimensione degli Elementi: la Proprietà height e width

Le proprietà per definire le dimensioni dell'elemento sono:
width (larghezza)

height (altezza)

che possono essere espresse con diverse unità di misura come:

cm, mm, px, em, (unità di misura fisse, cioè non cambiano al variare della larghezza dell'elemento contenitore) oppure con il simbolo della percentuale

% (unità di misura relativa cioè che cambia al variare della larghezza dell'elemento contenitore).

I valori che possono assumere le proprietà width e di height sono:

auto cioè diamo facoltà al browser di gestire la situazione. In pratica il browser decide quanto far grande l'elemento, normanlmente lo lascia al 100%.

inherit (ereditare) eredita la larghezza dall'elemento padre. Nell'esempio che vediamo sotto nel codice si nota la differenza che c'è fra il paragrafo con id pippo ed il paragrafo con id pluto, tutti e due hanno come valore della proprietà width, inherit.
Il primo eredita il valore del padre, ed il padre è il div con id minnie
Il secondo eredita il valore del padre che è il body, quindi prende tutta la larghezza della pagina.

initial (iniziale) sta per valore di defoult, cioè il valore che ha l'elemento per impostazione predefinita.
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Box Model</title>
  <meta charset="utf-8">
  <style type="text/css">
     #minnie {
	     background-color: cyan;
	     width: 400px; 
     }
     p {
	     background-color: grey;
	     width: 100px; 
     }
     #pippo {
	     background-color: yellow;
	     width: inherit; 
     }
     #pluto {
	     background-color: green;
	     width: inherit; 
     }
     #topolino {
	     background-color: red;
	     width: initial;
     }
  </style>
 </head>
 <body>			    
   <h1>Dimensione degli Elementi la Proprietà height e width.</h1>
   <div id="minnie">
	   Contenuto del div
	   <p>Contenuto del paragrafo 1</p>
	   <p id="pippo">Contenuto del paragrafo 2</p>
   </div>
   <p id="pluto">Contenuto del paragrafo 3</p>
   <p id="topolino">Contenuto del paragrafo 4 </p>
 </body>               
</html>