Fabio Donatantonio

(http://www.donatantonio.
net/blog/)
Software Developer / Adjunct Professor

HTML/CSS (HTTP://WWW.DONATANTONIO.NET/BLOG/CATEGORY/GUIDE_TUTORIAL/HTMLCSS/)

Html: dimensione degli elementi

GENNAIO 29, 2013 BY DONATANTONIO (HTTP://WWW.DONATANTONIO.NET/BLOG/AUTHOR/DONATANTONIO/)

Larghezza di un
Questo sito utilizza elemento
cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Grazie alla proprietà width ( larghezza ), è possibile specificare in pixel o in percentuale la
larghezza che un elemento dovrà occupare all’interno della finestra del browser.
Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)
 La sintassi è molto semplice:

<div style=‘width:200px’>…Contenuto…</div>

Questa proprietà è molto utile quando si desidera realizzare menu, finestre o elementi che
richiedano dimensioni ben precise.

Vediamo un esempio di codice html:

1 </pre>
2 <div style="‘width: 200px;">Questo div è largo 200px</div>
3 <div style="‘width: 300px;">Questo div è largo 300px</div>
4 <div style="‘width: 400px;">Questo div è largo 400px</div>
5 <pre>

In questo esempio abbiamo definito 3 div in sequenza, ognuno con un semplice testo all’interno;
abbiamo assegnato larghezze diverse e un colore di sfondo.
Da notare che l’altezza del div, in questo esempio, è dipeso dal contenuto; un div con più righe di
testo risulterà più alto di un div con una sola riga.

In alternativa avremmo potuto utilizzare un valore percentuale per la proprietà width.

In questo caso è essenziale conoscere le dimensioni dell’elemento che conterrà l’elemento al

quale applicare una dimensione in percentuale.
Difatti con il seguente codice:

<div style=‘width:50%’>…Contenuto…</div>

definiamo un div che occuperà il 50% in larghezza rispetto all’elemento che lo contiene.
Riprendendo il codice
Questo sito utilizza html per
cookie precedente, apportiamo
funzioni proprie alcunepubblicità
e per inviare modifiche:in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

1 </pre>
2 <div style="‘width: 20%;">Questo div è largo il 20%</div>
3 <div style="‘width: 30%;">Questo div è largo il 30%</div>
Per saperne
4 <div di più leggi la Politica dei
style="‘width: Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)
50%;">Questo div è largo il 50%</div>
 5 <pre>

I tre div definiti si adatteranno alle dimensioni del body e quindi della finestra del browser. In
altre parole se rimpiccioliamo la finestra, anche i div assumeranno dimensioni diverse
rispettando le percentuali assegnategli.

Altezza di un elemento

Grazie alla proprietà height possiamo definire l’altezza massima che un elemento deve
assumere.
La sintassi è del tutto simile alla proprietà width:

<div style=‘height:200px’>…Contenuto…</div>

Combinando insieme width e height è possibile realizzare dei box e della finestre a larghezza
fissa. Vediamo il seguente esempio:

1 </pre>
2 <div style="width: 200px; height: 200px; background-color: red;">DIV</d
3 <div style="width: 300px; height: 300px; background-color: red;">DIV</d
4 <div style="width: 400px; height: 400px; background-color: red;">DIV</d
5 <pre>

I tre box definiti hanno larghezza e altezza fissa e un colore di sfondo per essere evidenziati. Di
seguito il risultato nella finestra del browser:

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 Così come per la proprietà width, anche height permette di utilizzare un valore espresso in
percentuale. Inoltre è possibile utilizzare simultaneamente percentuali e pixel, ad esempio
definendo un’altezza in pixel e una larghezza in percentuale o viceversa.

Questo modo di operare è utile quando si vuol realizzare una pagina web che si estenda
esclusivamente in larghezza o altezza.

Vediamo il seguente codice html:

1 <div style="width: 300px; height: 100%; background-color: red;">DIV</di

Il div ha una larghezza fissa di 300px e un’altezza flessibile che si adatta alle dimensioni della
finestra.

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 DIMENSIONE ELEMENTI HTML (HTTP://WWW.DONATANTONIO.NET/BLOG/TAG/DIMENSIONE-ELEMENTI-HTML/)

HEIGHT E WIDTH (HTTP://WWW.DONATANTONIO.NET/BLOG/TAG/HEIGHT-E-WIDTH/)

No Comments Share:
(Http://Www.Donatantonio.Net/Blog/Guide_tutorial/  (Http://Www.Facebook.Com/Sharer/Sharer.Php?
Htmlcss/Html-Dimensione-Degli- U=Http%3A%2F%2Fwww.Donatantonio.Net%2Fblo
Elementi/#Respond)
Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.
g%2Fguide_tutorial%2Fhtmlcss%2Fhtml-

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 (http://www.dona
tantonio.it/)
Fabio Donatantonio (http://www.donatantonio.net/blog/author/donatantonio/)
Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP.
Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale
presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da
sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

CSS: pseudo-classi e pseudo-

elementi
(http://www.donatantonio.net/blog
/guide_tutorial/htmlcss/css-
pseudo-classi-e-pseudo-elementi/)
GENNAIO 31, 2013

CSS: selettori speciali

(http://www.donatantonio.net/blog
/guide_tutorial/htmlcss/css-
selettori-speciali/)
GENNAIO 31, 2013

CSS: i selettori (parte II)

(http://www.donatantonio.net/blog
/guide_tutorial/htmlcss/css-i-
selettori-parte-ii/)
GENNAIO 31, 2013
Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 Leave a reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Salva il mio nome, email e sito web in questo browser per la prossima volta che commento.

ERRORE per il proprietario del

sito:
dominio non valido per la reCAPTCHA
chiave del sito Privacy - Termini

POST COMMENT

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

  PREVIOUS POST (HTTP://WWW.DONATANTONIO.NET/BLOG/GUIDE_TUTORIAL/HTMLCSS/HTML-BORDI-MARGINI-

E-SPAZIATURA/)

NEXT POST  (HTTP://WWW.DONATANTONIO.NET/BLOG/GUIDE_TUTORIAL/HTMLCSS/HTML-I-COLORI-E-GLI-

SFONDI/)

DI DATTI CA

Data Evento

09/02/2021 Esame Archivistica

14:30 Digitale e Informatica per
le Scienze Umane - Cds
Letteratura, Lingua e
Cultura Italiana - Lettere

09/02/2021 Esame Introduzione

14:30 all'Archivistica Digitale e
all'Informatica per le
Scienze Umane - Cds
Letteratura, Arte, Musica
e Spettacolo - Lettere

09/02/2021 Esame Abilità

17:30 Informatiche e
Telematiche - Cds Design
e Discipline della Moda -
Lettere
Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 Data Evento

09/02/2021 Esame Abilità

17:30 Informatiche e
Telematiche - Cds
Letteratura, Arte, Musica
e Spettacolo - Lettere

Risorse

Guida HTML/CSS per principianti (link

(http://www.donatantonio.net/blog/?
page_id=1256))

Introduzione agli ipertesti (link

(http://www.donatantonio.net/blog/?
p=719))

Esercizi guidati in Java (link

(http://www.donatantonio.net/blog/?
cat=69))

Intelligenza artificiale (link

(http://www.donatantonio.net/blog/?
p=687))

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 Libri

Fondamenti di
Informatica (2011) (link
(http://www.donatanton
io.net/blog/guide_tutori
al/tutorial_pubblicazion
i/fondamenti-di-
informatica/))

Informatica per le
Scienze Umane (2011)
(link
(http://www.donatanton
io.net/blog/guide_tutori
al/tutorial_pubblicazion Fondamenti di
i/informatica-per-le- informatica
scienze-umane/))

Acquista ora
Fondamenti di
Informatica (2014) (link
(http://www.donatanton
io.net/blog/guide_tutori
al/tutorial_pubblicazion
i/fondamenti-di-
informatica-2014/))

Pagina Docente

uniecampus.it - Scheda Docente (link

(http://servizi.uniecampus.it/portale/scheda
docente.aspx?docente=37753))

Contatti

fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento

di Informatica Applicata dell'Università degli
Studi di Salerno:
Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 (http://www.donatantonio.net/blog/?
page_id=3#jwhisper)

P U BBLI CA ZI O NI

INFO RMAT ICA P ER L E SCIENZ E UMA NE

(HT T P ://W W W.DO NATA NT O NIO .NET/BL O G/GUID
E_T UT O RIA L /T UT O RIA L _P UBBL ICA Z IO NI/INFO RM
AT ICA -P ER-L E-SCIENZ E-UMA NE/)

Informatica per le scienze umane R. Botteri, F.

Donatantonio , M. Ceracchi (2011) Collana
Quaderni di Lettere – Ed. C.E.S.D. srl
(http://www.donatantonio.net/blog/guide_tut
orial/tutorial_pubblicazioni/informatica-per-
le-scienze-umane/)

STAY CO NNECTED

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 

(https

://it.li 

 nkedi (https 

(https n.com ://plus (https 

://ww  /in/fa .googl ://ww (http:

w.fac (https bio- e.com w.flic //ww

eboo ://twi donat /105 kr.co w.don

k.com tter.c anton 8958 m/ph atant

/fabio om/fd io- 5884 otos/f onio.n

.dona onata 9a1a 4174 donat et/blo

tanto ntoni a411 3096 anton g/fee

nio) o) ) 46) io/) d/)

CATEG O RI E

Ajax
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/ajax/)
(5)

Didattica Generale
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/didattica/)
(8)

Foto/Video
(http://www.donatantonio.net/blog/category/rif
lessioni/foto_video/)
Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.
(5)
Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 Html/Css
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/htmlcss/)
(35)

Java
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/java/)
(30)

Javascript
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/javascript/)
(33)

PHP
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/php/)
(16)

Riflessioni
(http://www.donatantonio.net/blog/category/rif
lessioni/)
(16)

Tips & Tricks

(http://www.donatantonio.net/blog/category/ti
psetricks/)
(10)

Tutorial e Pubblicazioni
(http://www.donatantonio.net/blog/category/gu
ide_tutorial/tutorial_pubblicazioni/)
(11)

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.
TW I TTER
Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 Tweets di @FDonatantonio
(https://twitter.com/FDonatantonio)

LE MI E F O TO

(https://www.flickr.com/photos/fdonatantoni
o/albums/72157649589963865)

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazioneMENU

accetti il loro utilizzo. Accetta

Home (http://www.donatantonio.net/blog/)
Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)
About me (http://www.donatantonio.net/blog/chi-sono/)

Portfolio (http://www.donatantonio.net/blog/i-miei-lavori/)

Tutorial e Pubblicazioni (http://www.donatantonio.net/blog/category/guide_tutorial/tutorial_pubblicazioni/)

Ajax (http://www.donatantonio.net/blog/category/guide_tutorial/ajax/)

Didattica Generale (http://www.donatantonio.net/blog/category/guide_tutorial/didattica/)

Html/Css (http://www.donatantonio.net/blog/htmlcss/)

Java (http://www.donatantonio.net/blog/category/guide_tutorial/java/)

Javascript (http://www.donatantonio.net/blog/category/guide_tutorial/javascript/)

PHP (http://www.donatantonio.net/blog/category/guide_tutorial/php/)

Tips & Tricks (http://www.donatantonio.net/blog/category/tipsetricks/)

Riflessioni (http://www.donatantonio.net/blog/category/riflessioni/)
Foto/Video (http://www.donatantonio.net/blog/category/riflessioni/foto_video/)

Contatti (http://www.donatantonio.net/blog/contatti/)
Politica dei cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

CA LENDA RI O

L M M G V S D

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

Questo
25 sito utilizza
26cookie per funzioni
27 proprie e 28
per inviare pubblicità
29 in linea con
30le tue preferenze.
Se continui nella navigazione accetti il loro utilizzo. Accetta
« Feb (http://www.donatantonio.net/blog/2020/02/)

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 TA G

cartelli divertenti (http://www.donatantonio.net/blog/tag/cartelli-divertenti/) checkbox html

(http://www.donatantonio.net/blog/tag/checkbox-html/) colspan e rowspan (http://www.donatantonio.net/blog/tag/colspan-e-

rowspan/) datatable ordinamento doppio (http://www.donatantonio.net/blog/tag/datatable-ordinamento-doppio/) disabilitare ricerca

datatable (http://www.donatantonio.net/blog/tag/disabilitare-ricerca-datatable/) elenchi puntati html

(http://www.donatantonio.net/blog/tag/elenchi-puntati-html/) form dinamico (http://www.donatantonio.net/blog/tag/form-dinamico/)

intelligenza artificiale e medicina (http://www.donatantonio.net/blog/tag/intelligenza-artificiale-e-medicina/) jquery val

(http://www.donatantonio.net/blog/tag/jquery-val/) link interni html (http://www.donatantonio.net/blog/tag/link-interni-html/)

malinconia (http://www.donatantonio.net/blog/tag/malinconia/) migliorare ricerca internet

motori di ricerca
(http://www.donatantonio.net/blog/tag/migliorare-ricerca-internet/)

(http://www.donatantonio.net/blog/tag/motori-di-
ricerca/) optgroup select (http://www.donatantonio.net/blog/tag/optgroup-select/) programmatore e solitudine

(http://www.donatantonio.net/blog/tag/programmatore-e-solitudine/) scrivere in un elemento html

(http://www.donatantonio.net/blog/tag/scrivere-in-un-elemento-html/) selettore generale

(http://www.donatantonio.net/blog/tag/selettore-generale/) semplice tris java (http://www.donatantonio.net/blog/tag/semplice-tris-java/)

substring (http://www.donatantonio.net/blog/tag/substring/) th html (http://www.donatantonio.net/blog/tag/th-html/)

RECENT P O STS

(http://www.donatantonio.net/blog/tipsetricks/php-invertire-una-stringa-strrev/)

PHP: invertire una stringa (strrev) (http://www.donatantonio.net/blog/tipsetricks/php-invertire-una-

stringa-strrev/)

(http://www.donatantonio.net/blog/tipsetricks/php-lunghezza-di-una-stringa-strlen/)

PHP: lunghezza di una stringa (strlen) (http://www.donatantonio.net/blog/tipsetricks/php-lunghezza-di-una-

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.
stringa-strlen/)
Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)

 (http://www.donatantonio.net/blog/tipsetricks/php-selezione-di-sottostringa-substr/)

PHP: selezione di sottostringa (substr) (http://www.donatantonio.net/blog/tipsetricks/php-selezione-di-

sottostringa-substr/)

LO G I N

Nome utente

Password

Ricordami ACCEDI

Password dimenticata? (http://www.donatantonio.net/blog/wp-login.php?action=lostpassword)

© 2008 - 2023 Fabio Donatantonio

Questo sito utilizza cookie per funzioni proprie e per inviare pubblicità in linea con le tue preferenze.

Se continui nella navigazione accetti il loro utilizzo. Accetta

Per saperne di più leggi la Politica dei Cookie (http://www.donatantonio.net/blog/politica-dei-cookie/)