Ciao a tutti! 🙂

Vi ricordate quando parlavamo delle proprietà float e clear per poter posizionare gli elementi all’interno della pagina web?

Ottimo, oggi vedremo un’altra proprietà ancora più easy per poter realizzare la vostra pagina!

Si tratta dell’attributo display con il valore inline-block.

Ma passiamo alla pratica!

Impaginazione con il float

Nell’esempio sottostante potete osservare l’utilizzo dell’attributo float.


1

Per poter mandare a capo il div con il testo “che belli questi cagnolini” ho ricorso all’attributo clear:

.clear {

clear: both;

}

FLOAT VS INLINE-BLOCK


1

Da come potete vedere dall’esempio, il risultato della pagina sarà lo stesso.

Utilizzando la proprietà inline-block gli elementi verranno “interpretati” come dei blocchi (in quanto hanno una width e una height definite), ma al tempo stesso si comportano come degli inline, ovvero, se c’è spazio occuperanno l’intera riga (senza quindi dover chiedere aiuto all’attributo clear)!

Come vi sembra? Semplice vero? 😉




Add Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.