In questa lezione affronteremo l'uso delle proprietà padding-margin-height-width applicate ai tag did ampliando i concetti espressi nella lezione precedente.

Partiamo appunto da dove avevamo terminato nella lezione precedente e supponiamo di aver racchiuso nel body due div uno dentro l'altro chiamati #Contenitore - #Contenuto

in modalità codice le nostre istruzioni avranno la seguente sintassi


mentre in modalità progettazione la pagina avrà la seguente visualizzazione


Ora andiamo sul pannello Stili CSS selezioniamo il div #Contenitore, e cliccando su aggiungi proprietà diamo un'altezza di 300px ed una larghezza di 300px


Eseguiamo la stessa procedura selezionando il div #Contenuto e diamo un'altezza di 100px ed una larghezza di 100px

Così facendo in modalità progettazione la pagina avrà la seguente visualizzazione


Aggiungiamo altre due proprietà che sono il padding ed il margin

il padding rappresenta la distanza che intercorre ,all'interno del contenitore ( div ), dal bordo esterno all'elemento interno.

il margin rappresenta la distanza che intercorre dal bordo esterno all'elemento esterno vicino al contenitore ( div ).

Aggiungiamo ad esempio al div #Contenitore un padding di 20px ed al div #Contenuto un padding di 10px ed un un margin di 10px.

A questo punto in modalità progettazione la pagina avrà la seguente visualizzazione

COMMENTI