<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>paitadesignblog &#187; display</title>
	<atom:link href="http://www.paitadesign.com/blog/tag/display/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.paitadesign.com/blog</link>
	<description>HTML, CSS e tutto il resto</description>
	<lastBuildDate>Thu, 06 Oct 2011 09:55:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Tag HTML: capire la differenza tra elementi block e inline</title>
		<link>http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/</link>
		<comments>http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/#comments</comments>
		<pubDate>Sun, 17 Jan 2010 20:40:43 +0000</pubDate>
		<dc:creator>Giacomo Paita</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[block]]></category>
		<category><![CDATA[display]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[inline]]></category>

		<guid isPermaLink="false">http://www.paitadesign.com/blog/?p=274</guid>
		<description><![CDATA[


Articoli correlati:<ol><li><a href='http://www.paitadesign.com/blog/html5-tavola-degli-elementi-interattiva/' rel='bookmark' title='Permanent Link: HTML5: tavola degli elementi interattiva!'>HTML5: tavola degli elementi interattiva!</a></li>
<li><a href='http://www.paitadesign.com/blog/tabelle-html-come-usarle-quando-usarle/' rel='bookmark' title='Permanent Link: Tabelle HTML: come usarle, quando usarle'>Tabelle HTML: come usarle, quando usarle</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Ogni web deisigner deve conoscere approfonditamente <a href="http://www.yourinspirationweb.com/references-html/" title="HTML: lista completa di tutti i tag" target="_blank">tutti i tag</a> e il lotro utilizzo, e deve sapere che in una pagina <acronym title="HyperText Markup Language">HTML</acronym> si possono incontrare sostanzialmente due categorie di elementi: <code>inline</code> e <code>block</code>.<br />
Tramite i <acronym title="Cascading Style Sheet">CSS</acronym> è possibile comunque settare per ogni elemento queste proprietà di <code>display</code>: block, inline, none, inline-block, list-item, run-in, compact, table. In questo post vedremo quali sono gli <em>elementi in linea</em> e quali quelli a <em>livello di blocco</em>, quali sono le loro <strong>caratteristiche comuni</strong>, e <strong>come vengono renderizzati</strong> in pagina.</p>
<p><span id="more-274"></span></p>
<h3>1. Elementi block-level in <acronym title="HyperText Markup Language">HTML 4</acronym></h3>
<p>Un elemento block-level è un elemento che forma un blocco separato<em>, può contenere</em> elementi block-level e elementi inline e gli si possono <em>attribuire delle dimensioni</em>. Gli elementi block-level      vengono disposti verticalmente, formando una nuova riga. Un elemento block level di dimensioni non specificate occupa tra margini, bordi,      padding e contenuto, <strong>tutta la larghezza messa a disposizione del suo box contenitore</strong>.      In verticale occuperà l&#8217;altezza necessaria al suo contenuto.</p>
<ul>
<li><code>address</code> fornisce le informazioni riguardo i contatti della pagina</li>
<li><code>blockquote</code> usato per blocchi di citazioni</li>
<li><code>div</code> è un blocco contenitore (<code>div</code> è abbreviazione di &#8220;DIVisore&#8221; )</li>
<li><code>frameset</code> è un contenitore che permette frames multipli (documenti html) da piazzarsi nel browser</li>
<li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code> titoli della pagina o dei paragrafi </li>
<li><code>hr</code> serve per definire una linea orizzontale</li>
<li><code>noframes</code> contenuto alternativo per i brwser che non supportano i frames</li>
<li><code>noscript</code> contenuto alternativo per i browser che non eseguono gli script</li>
<li><code>p</code> paragrafo: non dovrebbe contenere altri elementi a livello di blocco, comprese le tabelle, ma possono contenere elementi a livello di lista </li>
<li><code>pre</code> testo preformattato che viene rendererizzato con gli spazi e le interruzioni di riga</li>
<li><code>table</code> è usata per presentare set di dati puri: i suoi elementi &#8220;figli&#8221; si comportano come elementi a livello di blocco. Può contenere altre tabelle</li>
<li><code>form</code> usato per presentare formulari: i suoi sotto-elementi si comportano come elementi a livello di blocco</li>
</ul>
<p>I seguenti elementi possono essere considerati a livello di blocco dato che possono contenere elementi a livello di blocco: </p>
<ul>
<li><code>dd </code><a href="http://www.w3schools.com/TAGS/tag_dd.asp" title="Definition and Usage of DD" target="_blank">definizione di una descrizione</a></li>
<li><code>dt</code> definizione</li>
<li><code>li</code> List item</li>
<li><code>tbody</code> Table body </li>
<li><code>td</code> Table data cell</li>
<li><code>tfoot</code> Table foot </li>
<li><code>th</code> Table header cell</li>
<li><code>thead</code> Table head </li>
<li><code>tr</code> Table row </li>
</ul>
<p>Tra di essi, questi sono considerati <strong>elementi List-item</strong>:</p>
<ul>
<li><code>dl</code> lista di definizioni</li>
<li><code>li</code> elemento di una lista</li>
<li><code>ol</code>  lista ordinata (numerata)</li>
<li><code>ul</code> lista non ordinata  (non numerata)</li>
</ul>
<h3>2. Elementi in linea in <acronym title="HyperText Markup Language">HTML 4</acronym></h3>
<p>Un elemento in linea è un elemento che rimane in linea con il resto del contenuto: può contenere solo altri elementi inline. Ad un elemento inline, a meno che questo non venga dichiarato float,      posizionato o modificandone la sua natura con la proprietà display, <em><strong>non si possono      attribuire delle dimensioni</strong></em> (in realtà un elemento inline può avere solo una sorta di &quot;dimensione verticale&quot;      grazie alla proprietà line-height. <em>La disposizione verticale di elementi inline con      la proprietà line-height impostata rispetto ad altri elementi inline adiacenti      e/o contenitori si controlla grazie alla proprietà vertical-align</em>). Elementi inline adiacenti vengono disposti <strong><em>orizzontalmente</em></strong>. Un elemento inline occuperà sia in orizzontale che in verticale l&#8217; altezza necessaria      al suo contenuto.</p>
<ul>
<li><code>a</code> denota testo ancora</li>
<li><code>abbr</code> denota una frase abbreviata</li>
<li><code>acronym</code> denota un acronimo</li>
<li><code>area</code> denota la regione di una mappa all&#8217;interno di una immagine </li>
<li><code>big</code> denota testo di grosse dimensioni</li>
<li><code>bdo</code> sovrascrive la direzione del testo con i valori di ltr (da sinistra a destra) o rtl (da destra a sinistra)</li>
<li><code>br</code> denota un a capo </li>
<li><code>cite</code> indica il titolo di un articolo o un documento citato </li>
<li><code>code</code> denota il codice di un computer </li>
<li><code>dfn</code> denota una definizione </li>
<li><code>em</code> denota una frase da enfatizzare </li>
<li><code>img</code> immagine (con altezza e larghezza intrinseca)</li>
<li><code>ins</code> denota testo inserito </li>
<li><code>kbd</code> denota testo inserito da tastiera </li>
<li><code>q</code> citazione breve</li>
<li><code>samp</code> denota un esempio</li>
<li><code>small</code> denota testo in piccole dimensioni </li>
<li><code>span</code> è un contenitore per testo da formattare in modo speciale</li>
<li><code>strike</code> inserisce una linea sul testo </li>
<li><code>strong</code> denota testo importante</li>
<li><code>sub</code> subscript</li>
<li><code>sup</code> superscript</li>
<li><code>textarea</code> un form per testo multilinea</li>
<li><code>tt</code> usato per teletypefont monospaziato</li>
<li><code>var</code> denota una variabile in un programma</li>
</ul>
<h3>3. Elementi Block/Inline  in <acronym title="HyperText Markup Language">HTML 4</acronym></h3>
<p>Questi elementi possono essere considerati a livello di blocco o in linea a seconda di come sono usati: sono <em>in linea </em>se sono inseriti <em><strong>dentro un paragrafo o dentro un elemento in linea</strong></em>. In questo caso <strong>non possono contenere elementi a livello di blocco</strong>.</p>
<ul>
<li><code>button</code> Usato per definire il submit, reset o push button di un form</li>
<li><code>del</code> è usato per indicare una frase cancellata. È sia block che inline </li>
<li><code>ins</code> è usato per indicare una frase inserita. È sia block che inline</li>
<li><code>map</code> indica una mappa immagine, ed è usato con i tag img e object</li>
<li><code>script</code> definisce uno script da eseguire nel documento</li>
</ul>
<div class="resources">
<h3>Letture consigliate</h3>
<p><a href="http://css.html.it/articoli/leggi/345/capire-il-box-model/" title="Elementi inline ed elementi block-level" target="_blank">Capire il box model</a><br />
<a href="http://www.comptechdoc.org/independent/web/html/guide/htmlcsscat.html" title="HTML elements are categorized into several categories" target="_blank">HTML Element Categories</a><br />
<a href="http://www.comptechdoc.org/independent/web/html/guide/htmlelement.html" title="HTML Elements" target="_blank">Rules with regard to what elements a specific element may contain</a><br />
<a href="http://css.flepstudio.org/css-proprieta/display.html" title="Nel creare pagine HTML è importante differenziare le due categorie di elementi block e inline" target="_blank">Differenza tra elementi block e inline</a><br />
<a href="http://css.flepstudio.org/css-proprieta/display.html" title="CSS DISPLAY: block, inline, none, inline-block, list-item, run-in, compact, table">Proprietà css display</a>
</div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/&amp;t=Tag+HTML%3A+capire+la+differenza+tra+elementi+block+e+inline" rel="nofollow" class="external" title="Condividi su Facebook">Condividi su Facebook</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Tag+HTML%3A+capire+la+differenza+tra+elementi+block+e+inline+-+http://b2l.me/gb75r&amp;source=shareaholic" rel="nofollow" class="external" title="Tweetalo!">Tweetalo!</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/&amp;title=Tag+HTML%3A+capire+la+differenza+tra+elementi+block+e+inline" rel="nofollow" class="external" title="Condividi su del.icio.us">Condividi su del.icio.us</a>
		</li>
		<li class="shr-mail">
			<a href="mailto:?subject=%22Tag%20HTML%3A%20capire%20la%20differenza%20tra%20elementi%20block%20e%20inline%22&amp;body=Link: http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/ (inviato con shareaholic)%0D%0A%0D%0A----%0D%0A Tag%20HTML.%20In%20una%20pagina%20HTML%20possiamo%20incontrare%20sostanzialmente%20due%20categorie%20di%20elementi%3A%20inline%20e%20block.%20" rel="nofollow" class="external" title="Vuoi segnalarlo via mail ad un amico?">Vuoi segnalarlo via mail ad un amico?</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/&amp;title=Tag+HTML%3A+capire+la+differenza+tra+elementi+block+e+inline&amp;summary=Tag%20HTML.%20In%20una%20pagina%20HTML%20possiamo%20incontrare%20sostanzialmente%20due%20categorie%20di%20elementi%3A%20inline%20e%20block.%20&amp;source=paitadesignblog" rel="nofollow" class="external" title="Condividi su LinkedIn">Condividi su LinkedIn</a>
		</li>
		<li class="shr-gmail">
			<a href="https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=Tag+HTML%3A+capire+la+differenza+tra+elementi+block+e+inline&amp;body=Link: http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/ (inviato con shareaholic)%0D%0A%0D%0A----%0D%0A Tag%20HTML.%20In%20una%20pagina%20HTML%20possiamo%20incontrare%20sostanzialmente%20due%20categorie%20di%20elementi%3A%20inline%20e%20block.%20" rel="nofollow" class="external" title="Manda email con Gmail">Manda email con Gmail</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/feed" rel="nofollow" class="external" title="Vuoi iscriverti ai commenti per questo post?">Vuoi iscriverti ai commenti per questo post?</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>



<p>Articoli correlati:</p><ol><li><a href='http://www.paitadesign.com/blog/html5-tavola-degli-elementi-interattiva/' rel='bookmark' title='Permanent Link: HTML5: tavola degli elementi interattiva!'>HTML5: tavola degli elementi interattiva!</a></li>
<li><a href='http://www.paitadesign.com/blog/tabelle-html-come-usarle-quando-usarle/' rel='bookmark' title='Permanent Link: Tabelle HTML: come usarle, quando usarle'>Tabelle HTML: come usarle, quando usarle</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.paitadesign.com/blog/html-capire-differenza-tra-elementi-block-e-inline/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

