ABC del HTML♥ {secondo -spiki}

Abbiamo terminato le proprietà che agiscono sul testo (o font). Adesso ci rimane da analizzare quelle inerenti al box.

Sto parlando di:
- margin→ margine esterno.
- padding→ margine interno.
- border→ bordo esterno.
- border-radius→ bordo arrotondato.
- box-shadow→ ombreggiatura al box.

Non sono proprietà difficili, ma bisogna ricordarsi 2 cose:
1. agiscono tutte in px.
2. per annullarle basta scrivere 0.
Esempio:
- margin: 0
- padding 0
etc..

Prima però, voglio parlare di angoli e posizioni.
Ci sono 4 posizioni, e 4 angoli.
Mi sto riferendo a:
- left (sinistra)
- right (destra)
- top (alto)
- bottom (basso)

E agli angoli:
- topleft (alto a sinistra)
- bottomleft (in basso a sinistra)
- topright (altro a destra)
- bottomright (basso a destra)

Questi ricordateveli perchè vi serviranno.

# margin e/o padding:
Tra i 2 c'è una differenza nell' agire. Se avete un testo dentro a un box:
- il padding sarà il margine dal testo al bordo del box.
- il margin sarà il margine dal bordo del box allo sfondo a cui è collocato.
Quest' Immagine dovrebbe aiutarvi a capire.
Non spendo ulteriori parole sul margin e padding. Ricordate (come vedete dall' immy) che loro agiscono solo con le 4 posizioni e in px.
Se si vuole solo (o più) margin (o un padding), basta scrivere margin-posizione: XXpx.

# border:
Ci sono diversi tipi di bordi, che non sto a elencare. Li trovate qui.
Dei bordi c'è da sapere che si scrivono così:

Cioè dovete definire un valore (che è il loro spessore), il tipo di bordo e il colore.
Il bordo si può scindere, nel senso che anche lui agisce con le posizioni. Potete fare solo un bordo superiore border-top, oppure un superiore e un inferiore bordet-top e border-bottom e così via.
Esempio:


# border-radius
Il border-radius rapprensenta il bordo arrotondato. E' l'unico che agisce con gli angoli ed è solo in px.

Maggiore è il valore, e maggiore è l'angolo.
Al solito: gli angoli sono 4 e li potete gestire come volete. Potete fare il vostro schema con un solo angolo, con 2 etc...
Nel border-radius non c'è tipo di bordo o colore. Quelli sono parametri di border, nel codice basta che li inserite entrambi e sarà tutto automatico.
Esempio:

Altri tipi di bordi sono disponibili qui.

# box-shadow:
E' indentico a tex-shadow solo che si riferisce all' ombra del box, ma si scrive nella stessa forma.
Esempio:

Maggiori informazione su quest'ultimo sono qui.
Se avete dubbi sulle altre, guardate i link precedenti postati oppure cercate su Google =)