Come inserire uno spazio tra un'immagine e il testo in HTML e CSS

February 20

Inserimento di almeno alcune pixel di spazio tra un'immagine e il testo che la circonda rende per un layout meno ingombrante e testo che è più facile da leggere. È possibile controllare lo spazio tra il bordo di un'immagine e il testo che la circonda fino al pixel utilizzando il CSS o Cascading Style Sheet, attributo "margine". In alternativa, è possibile inserire questo attributo direttamente nel tag HTML dell'immagine invece. È possibile specificare una dimensione dei margini per tutti e quattro i lati dei margini diversi grafici o di listino per ogni lato.

istruzione

1 Aprire la pagina del file o Web contenente il codice HTML per l'immagine e il testo. Individuare tag HTML dell'immagine, che inizia con "<IMG".

2 Digitare il seguente attributo all'interno del tag IMG:

style = "margin: 10px;"

Ad esempio, il tag IMG può apparire come segue:

<IMG style = "margin: 10px;">

Modificare il numero 10 per qualsiasi altro numero di tua scelta. Ciò crea la stessa quantità di spazio su tutti quattro i lati dell'immagine.

3 Digitare il seguente all'interno del tag IMG per specificare margini diversi per ogni lato:

style = "margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;"

Cambiare ogni numero alle dimensioni del margine desiderato.

4 Salvare o pubblicare la pagina.

Consigli e avvertenze

  • Invece di pixel ( "px"), si può anche definire un margine in unità di em. Un em è un numero uguale di punti alla dimensione del font corrente. Ad esempio, se la dimensione complessiva dei font Se 12 punti, 1 em è di 12 punti.
  • È possibile specificare più margini stenografia con il seguente codice:
  • style = "margin: 10px 17px 2px 5px;"
  • Il primo numero si riferisce al margine superiore e poi si sposta in senso orario (a destra, in basso, a sinistra).