Come fare spazio tra immagini in CSS

August 28

Come fare spazio tra immagini in CSS


Quando si inserisce immagini sul vostro sito web, il browser visualizza le immagini a destra accanto all'altro automaticamente. Questa impostazione predefinita non è l'ideale, perché le foto possono apparire così vicini che è difficile distinguerli. Fortunatamente, Cascading Style Sheets (CSS) consente di creare una regola specifica per le immagini che rende lo spazio richiesto. Utilizzare il software editor di testo del computer per accedere al CSS che progetta il layout immagine che preferite.

istruzione

1 Avviare il software editor di testo e aprire il documento Web che ha le immagini che si desidera modificare.

2 Immettere il seguente codice CSS dopo l'apertura <head> in alto:

<Style type = "text / css">

img {}

</ Style>

La voce "img {}" crea uno stile che controlla le immagini sul vostro sito web.

3 Tipo "margin:;" all'interno delle parentesi graffe e immettere un valore in pixel (px) per determinare la quantità di spazio che appare su tutti i lati delle immagini. Per esempio:

img {margin: 10px; }

4 Salvare il file e visualizzare in anteprima il documento in un browser. Apportare modifiche ai valori dei pixel (se necessario) e quindi caricare il file sul tuo host Web per pubblicare il vostro lavoro.

Consigli e avvertenze

  • Hai la possibilità di specificare i valori dei margini diversi per una particolare area dell'immagine, come la parte superiore o inferiore. Inserire "margin-top", "margin-bottom", "margin-right" e "margin-left" e quindi digitare una dimensione di pixel preferita dopo ogni attributo, come segue:
  • img {margin-top: 10px; margin-bottom: 8px; margin-left: 5px; margin-right: 7px; }
  • La regola CSS viene applicato automaticamente ad ogni immagine si codifica nella pagina.