Differenze tra CSS e Margine imbottitura

November 20

Differenze tra CSS e Margine imbottitura


Web designer utilizzano i fogli di stile a cascata (CSS) al fine di consolidare le decisioni di progettazione. Piuttosto che il codice dimensioni dei caratteri, i colori, gli spazi di linea e un'immagine standard larghezze in ogni elemento in una pagina HTML, un designer di punta a un master file che contiene le istruzioni di base per l'intero sito. Margin e padding sono due istruzioni che entrambi creare lo spazio intorno ad un elemento, se tale elemento è un quadro, un paragrafo o un bordo. Tuttavia, ci sono importanti differenze tra come vengono utilizzati i margini e padding.

Imbottitura

L'imbottitura è lo spazio tra un elemento e il suo confine. Imbottiture possono essere impostati per essere generale (lo stesso su tutti quattro i lati) o specifici ad alto, in basso, a sinistra oa destra dell'elemento. Nel codice HTML, una imbottitura può essere impostato specificamente padding-top e padding-left o può essere impostato in stenografia con "padding: 10px 15px 20px 25px." Il primo numero rappresenta il top, il secondo numero rappresenta il diritto, il terzo numero rappresenta il fondo e l'ultimo numero rappresenta sinistra.

Margine

Il margine è lo spazio tra il bordo di un elemento e tutto il resto intorno. Esso è codificato con lo stesso superiore, inferiore, destro parametri come imbottitura sinistra. Si noti la differenza: imbottitura crea lo spazio all'interno del bordo e il margine crea lo spazio al di fuori del confine.

frontiere

Per un elemento con un bordo, la differenza tra imbottitura e margine entra in gioco. Per esempio, con una fotografia che il progettista vuole avere un bordo nero 1-pixel che tocca i bordi della foto, lo spazio viene creato con solo margine (lasciando l'imbottitura impostato a zero). Per un quadro che "galleggia" all'interno dello spazio bianco con un bordo di toccare il contenuto intorno ad esso, il progettista utilizza imbottitura (lasciando il margine impostato a zero). Padding e il margine possono essere usati in combinazione per inserire un bordo nello spazio tra contenuti e l'elemento.

sfondi

I colori di sfondo di elementi di "allungare" con imbottitura, ma non con un margine. Per esempio, un blocco di testo con uno sfondo giallo avrà solo giallo estende al bordo delle lettere e non ulteriormente se il riempimento è impostato a zero. Impostare il padding a 10 pixel aggiungerà un po 'di spazio giallo attorno al testo, ma il colore sarà ancora toccare tutti gli elementi di tutto il blocco di testo. Utilizzando il margine creerà lo spazio bianco attorno al bordo della scatola gialla.