July 30
Ogni elemento in CSS ha i propri valori e le proprietà. Utilizzando i CSS, un web designer può applicare una vasta gamma di effetti visivi e layout ad elementi, la costruzione di aspetto e formati diversi. Uno strumento di base a disposizione di un progettista è l'uso di bordi, separando visivamente elementi per una facile navigazione o comprensione. Essendo in grado di controllare la distanza e la posizione di un bordo intorno ad un elemento richiede la comprensione di imbottitura e il suo uso in CSS.
Elementi in CSS seguono il modello di dialogo. Fondamentalmente, ogni componente di un elemento è avvolto nel componente sopra, rendendo scatole sempre più piccoli. Ciò significa che i margini circondano il confine, che circonda l'imbottitura, che circonda il contenuto dell'elemento. Seguendo il modello box, la distanza tra il contenuto - ad esempio testo - e il bordo dell'elemento è l'imbottitura. Aumentando la distanza tra il testo e un bordo si fa specificando un valore per il riempimento di un elemento.
padding di un elemento può essere definito come margini e, ad un grado, i confini. Aggiungere "padding:" seguita dalla lunghezza e una chiusura e virgola per completare la linea. Ad esempio, un elemento con una spaziatura di 15 pixel sui quattro lati ha "padding: 15px", inclusa nelle proprietà dell'elemento. Proprio come margini e confini, tutti e quattro i lati di imbottiture possono essere dichiarati individualmente e dato valori diversi. Un elemento senza padding superiore e imbottitura in basso, ma a destra ea sinistra, ha la linea "padding: 0px 15px 0px 15p;" o "padding: 0px 15px;" utilizzando stenografia. Nel primo esempio, la dichiarazione inizia con il padding superiore e procede in senso orario; il secondo gruppo parte superiore e inferiore del primo valore e il sinistro e destro nel secondo. In entrambi i casi la forma è corretta.
Padding è usato per mettere distanza tra il contenuto di un elemento, ad esempio testo o un'immagine, e il bordo reale. Questo può essere utilizzato per impostare la larghezza di un elemento di confine avvolto in modo che non è limitata alla lunghezza del contenuto. Un lato di imbottitura di un elemento può essere spinto fuori oltre agli altri e combinato con un bordo su quel lato, creando un piacevole, semplice, divisore tra elementi in una lista. Utilizzare imbottitura come un altro strumento per organizzare e tracciare gli elementi di una pagina web.
Se un bordo non viene visualizzato visivamente intorno ad un elemento, può essere difficile distinguere padding dai margini. La differenza fondamentale tra i due è che il confine segna il bordo dell'elemento. Poiché i margini si trovano sull'altro lato del confine, vengono considerati all'esterno dell'elemento. Padding invece è ancora considerato all'interno dell'elemento, aumentando efficacemente 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, lo sfondo ferma al confine, mentre padding estende sfondo lungo tutta la sua lunghezza.