Ogni elemento in CSS ha i propri valori e proprietà. Utilizzando i CSS, un web designer può applicare una vasta gamma di effetti visivi e layout per elementi, costruire diversi sembra e formati. Uno strumento di base disponibile per una finestra di progettazione è l'utilizzo di bordi, separare visivamente gli elementi per la navigazione facile o comprensione. Essere in grado di controllare la distanza e la posizione di un bordo intorno a un elemento richiede la comprensione di imbottitura e il suo uso in CSS.

Box Model

Gli elementi in CSS seguono il modello box. Fondamentalmente, ogni componente di un elemento è avvolto nel componente sopra di esso, rendendo sempre più piccole scatole. Ciò significa che i margini circondano il bordo, che circonda l'imbottitura, che circonda il contenuto dell'elemento. Seguendo il modello di box, la distanza tra il contenuto..--ad esempio il testo..--e il bordo dell'elemento è l'imbottitura. Aumentando la distanza tra il testo e un bordo è necessario specificare un valore per la spaziatura interna di un elemento.

L'aggiunta di

Spaziatura interna di un elemento può essere definito come margini e, ad un grado, confini. Aggiungere "imbottitura:" seguita dalla lunghezza e un chiusura punto e virgola per completare la linea. Ad esempio, un elemento con un'imbottitura di 15 pixel su tutti e quattro i lati presenta "padding: 15px," incluso nella proprietà dell'elemento. Come margine e confini, tutti e quattro i lati dell'imbottitura possono essere dichiarati individualmente e dati valori diversi. Un elemento senza top e spaziatura interna inferiore, ma imbottitura destro e sinistro, presenta la linea "padding: 0px 0px 15px 15P;" o "imbottitura: 15px 0px;" utilizzando la sintassi abbreviata. Nel primo esempio, la dichiarazione inizia con la spaziatura interna superiore e procede in senso orario; il secondo raggruppa la parte superiore e inferiore nel primo valore e la sinistra e destra nel secondo. Entrambe le forme sono corretta.

Uso

Padding viene utilizzato per mettere la distanza tra il contenuto di un elemento, ad esempio testo o un'immagine e il confine effettivo. Questo può essere utilizzato per impostare la larghezza di un elemento border-avvolto in modo che non è limitato alla lunghezza del contenuto. Un lato di imbottitura per un elemento può essere spinto fuori maggiori rispetto agli altri e combinato con un bordo su quel lato, creando un bello, semplice, divisore tra elementi in un elenco. Utilizzare il riempimento come un altro strumento per organizzare e posizionare gli elementi in una pagina web.

Distinzione

Se visivamente non è visualizzato un bordo intorno a un elemento, può essere difficile distinguere imbottitura dai margini. La differenza fondamentale tra i due è che il confine segna il bordo dell'elemento. Perché i margini si trovano sul lato opposto del bordo, sono considerati all'esterno dell'elemento. Imbottitura d'altra parte è ancora considerato all'interno dell'elemento, efficacemente aumentando la dimensione complessiva dell'elemento. Questo è importante soprattutto quando si applica un colore di sfondo o un'immagine a un elemento. Se viene utilizzato un margine, sullo sfondo si ferma al confine, mentre l'imbottitura si estende sullo sfondo fuori tutta la sua lunghezza.