Nei documenti HTML, i margini sono impostati utilizzando Cascading Style Sheet codice (CSS). Utilizzando questo codice aiuta a mantenere la struttura di una pagina Web separata dal suo stile, rendendo più facile per aggiornare lo stile di un intero sito web utilizzando uno o più file CSS. Margini forniscono zone cuscinetto intorno al contenuto di pagine Web e differiscono da imbottitura perché vanno al di fuori del confine di un elemento HTML, anche se non esiste, vero e proprio confine visibile. È possibile impostare per la parte superiore, inferiore, destra e sinistra, o qualsiasi combinazione, se necessario.

Il Modello Box

Più importante per comprendere i margini per i documenti HTML è il cosiddetto "modello di dialogo." Questo è il modello creato dal World Wide Web Consortium (W3C) per descrivere come i CSS può definire contenuti, padding, border e margin dimensioni. Facendo una buona occhiata al modello vi aiuterà a evitare mal di testa nel futuro. Il modello pone margini al di fuori del confine, mentre imbottitura e il contenuto vanno all'interno del bordo. Anche se non si imposta un bordo su un elemento HTML, come ad esempio un DIV, si dovrebbe immaginare un confine zero pixel tra imbottitura e margini. Si noti inoltre che, quando hanno due scatole side-by-side, i loro margini devono sovrapporsi.

Il margine di proprietà

Nei CSS, il "margine" insieme di proprietà comprende sia l'abbreviazione "margine" di proprietà e quattro proprietà specifiche di direzione, come "margin-left". La direzione di venire sempre secondo, quindi la proprietà del margine destro è scritto "margin-right" e così via. Le quattro direzioni sono alto, in basso, a sinistra ea destra.

Impostare il valore del margine

In genere, i codificatori CSS impostare il valore del margine in termini di pixel in questo modo:

margin-top: 20px;

Il codice di cui sopra imposta un margine superiore che è alto venti pixel. È inoltre possibile utilizzare le unità di misura relative, quali percentuali e SME. Quando il "margine" proprietà scorciatoia è impostato su 10 percento, per esempio, il browser calcola che il contenuto all'interno della scatola occupa 90 percento dello spazio. Browser calcola SME rispetto alla dimensione del testo utilizzato nel documento. Il vantaggio di valori dei margini relativi è che quando l'utente cambia la dimensione della finestra del browser, i margini verranno regolate automaticamente.

Utilizzando la proprietà Stenografia

È possibile impostare tutti e quattro i margini utilizzando solo la proprietà abbreviata. Quando si esegue questa operazione, iniziare con il valore del margine superiore e andare in giro in senso orario, viene così accanto, seguito da fondo e poi a sinistra. Se si lascia fuori uno dei quattro valori, allora il browser assume la direzione opposta --- come superiore, se solo dare un valore per il fondo --- è uguale. Ad esempio, il codice seguente imposta 10 pixel di spazio margine superiore, 20 sul fondo e 15 sia a destra e sinistra:

margin: 10px 15px 20px;

Margini Auto

Impostazione dei margini destro e sinistro per "auto" sarà incentrato contenuti nella maggior parte dei browser moderni. Alcuni browser più vecchi hanno bisogno di ulteriori lusinghe con particolare testo-allineamento e altre impostazioni. Ecco il codice per una scatola centrato orizzontalmente con una ventina di pixel in alto e in basso:

margin: 20px auto;

Si noti che nell'esempio di cui sopra, i margini superiore e inferiore, quando accoppiato, come primo. I margini sinistro e destro vengono secondo.