Lezione12: Height e width

Fino ad ora non ci siamo preoccupati molto delle dimensioni degli elementi con cui abbiamo lavorato. In questa lezione vedremo come si possono definire facilmente l'altezza e la larghezza di un elemento.

• width
• height

Definire la larghezza [width]

Con la proprietà width- puoi definire la larghezza di un elemento.

L'esempio semplice riportato sotto ci fornisce un contenitore all'interno del quale è possibile digitare del testo:

 div.box {
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 
 

• Visualizza l'esempio

Definire l'altezza [height]

Nota come nell'esempio sopra l'altezza del contenitore viene definita dallo stesso contenuto. Con la proprietà height puoi definire tu stesso l'altezza del contenitore. Come esempio proviamo a fare un contenitore alto 500px:

 div.box {
  height: 500px;
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 
 

• Visualizza l'esempio

Riepilogo

Le Lezioni 9, 10, 11 e 12 ti hanno introdotto al modello box dei CSS. Come potrai vedere il modello box ti fornisce molte nuove opzioni. Fino ad ora potresti aver usato delle tabelle in HTML per creare il tuo layout, ma con i CSS e il modello box adesso dovresti essere capace di costruire layout più eleganti e precisi, conformi alle raccomandazioni del W3C.

Postato sotto: Lezioni CSS