CSS a quattro dimensioni

Nel fantastico mondo tableless dei CSS di sono due attributi (ce ne sono anche altri???) che si possono definire in modo implicito o in modo esplicito. Nel modo implicito abbiamo una definizione quadridimensionale.

Gli attributi sono padding e margin, il primo che indica lo spazio interno di un oggetto che non deve essere "riempito". Il secondo lo spazio esterno dell’oggetto.

Definizione esplicita

margin-top: v1;
margin-right: v2;
margin-bottom: v4;
margin-left: v4;

Per ogni dimensione definiamo la misura: in pixel, em, % o auto (solo per left e right).

Definizione implicita

margin: v1 v2 v3 v4;

La definizione quadridimensionica esprime rispettivamente i valori per top, right, bottom, left. Però è possibile esprimersi definendo anche meno valore, vediamo come si comporta…

margin: v1;
viene assegnato il valore v1 a tutte le dimensioni

margin: v1 v2;
viene assegnato il valore v1 a top e bottom, v2 a left e right

margin: v1 v2 v3;
viene assegnato v1 al top, v2 al right e al left, v3 al bottom

Buon CSS World… capito Franz adesso???

Loading Facebook Comments ...

4 pensieri su “CSS a quattro dimensioni

  1. maurizio

    oltre a padding e margin c’è sicuramente border.

    leggermente differente è la sintassi di background e font che presentano una forma contratta leggermente più articolata.

    Rispondi
  2. Merlinox Autore articolo

    @maurizio: infatti. La sintassi di border è:
    dimensione tipo colore

    Quella di font, a quanto ho capito, mi sa che è libera. Nel senso non posizionale.

    Rispondi
  3. franz

    Grande!!! così riesco a fare dei css e gli inline style più “compatti”…

    E se volessi invece fare un bordino “arrotondato” molto 2.0? 😀

    Rispondi
  4. Merlinox Autore articolo

    Puoi usare la nuova definizione presente nei css3 che si chiama “border-radius”, oppure ti devi creare una struttura formata da più DIV fatti in modo particolare e background-image(s)… è una palla ma qualcuno deve pure farlo.
    Spesso (quando ho fretta) uso due immagini da mettere su top e footer. Una ottima soluzione comunque l’ho trovata sul sito di Flep Studio: http://tinyurl.com/au8wtv

    Per quanto riguarda il discorso 2.0 e trend… panta rei amico mio, panta rei!!!

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *