ubiquitour.com

Cómo crear espacio entre las imágenes en una página Web

Cómo crear espacio entre las imágenes en una página Web

A menos que usted específicamente añade el código HTML adecuado, una imagen en tu página Web no tendrá espaciamiento de canal entre él y cualquier otra imagen. La propiedad de margen CSS u hoja de estilo en cascada, agregar espacio alrededor de los cuatro lados de una imagen. Además, los atributos de etiqueta img vspace y hspace añadir espaciado vertical y horizontal alrededor de sus imágenes, respectivamente. Finalmente, si contiene cada imagen dentro de una sección separada de la div, el CSS relleno propiedad inserta espacio entre ellos, así.

Instrucciones

Espacio con la propiedad de margen

1 Tipo "< estilo tipo =" text/css">" en una línea en blanco arriba el < / cabeza > etiqueta, presione "Enter" dos veces y escriba "< / estilo >" en la actual línea en blanco. Colocar el par de etiqueta < estilo > dentro de la sección < head > de la Página Web crea una hoja de estilos interna. Estilos CSS personalizados están contenidos dentro del estilo de < > y < / estilo > etiqueta par. Por ejemplo, el código HTML dentro de la sección < head > debería parecerse a lo siguiente:

< estilo tipo = "text/css" >

< / estilo >< /HEAD >

2 Escriba el código CSS para añadir bordes alrededor de todas las imágenes de página Web. Por ejemplo, si desea rodear imágenes con un margen de 10px, el código de estilo CSS debería parecerse a lo siguiente:

< estilo tipo = "text/css" >IMG {margen: 10px}< / estilo >< /HEAD >

Muestra un margen de 10px en el superior, derecho, inferior y lados izquierdos de cada imagen que contiene su página Web.

3 Guardar los cambios y obtener una vista previa la página en su navegador. El código CSS para un estilo interno se aplicará sólo a la Página Web a la que se añade. Si desea que los márgenes que aparecen en todas las imágenes a través de su página web, agregue el código CSS a un archivo de hoja de estilos externa y agregue un vínculo al archivo en cada página web.

Si desea agregar espacio a imágenes específicas de una página Web en lugar de todas las imágenes, usar un estilo en línea en lugar de un estilo interno o externo. Por ejemplo, si desea agregar espacio 10px entre cuatro imágenes diferentes en una determinada página, el código debería parecerse a lo siguiente:

< img src="img1.jpg" estilo = "margen: 10px" >< img src="img2.jpg" estilo = "margen: 10px" >< img src="img3.jpg" estilo = "margen: 10px" >< img src="img4.jpg" estilo = "margen: 10px" >

Agrega Vspace y Hspace

4 Escriba el atributo vspace para cada imagen que desee insertar espacio arriba y abajo. Por ejemplo, si querías un 10px, canal vertical en sus imágenes, el código dentro de cada etiqueta img debería parecerse al siguiente:

< img src="img1.jpg" vspace = "10" >

5 Escriba el atributo hspace para cada imagen a la que desea agregar espacio horizontal. Si querías un canal de 20 píxeles a la izquierda y derecha de las imágenes, el código dentro de cada etiqueta de la imagen debería ser similar al siguiente:

< img src="img1.jpg" vspace = "10" hspace = "20" >

6 Guardar los cambios y obtener una vista previa la página en su navegador. Aunque vspace y hspace no son parte de la norma HTML5 navegadores como Firefox, Chrome e Internet Explorer todavía admiten los atributos.

Imágenes de la almohadilla dentro de Divs

7 Tipo "< div >" antes y "< / div >" después de cada etiqueta de la imagen que desee agregar espacio entre. Por ejemplo, si está trabajando con cuatro imágenes diferentes, el código se verá como la siguiente:

< div >< img src="img1.jpg" >< / div >< div >< img src="img2.jpg" >< / div >< div >< img src="img3.jpg" >< / div >< div >< img src="img4.jpg" >< / div >

8 Tipo el estilo CSS a las etiquetas div que añadir un acolchado alrededor de cada imagen. Por ejemplo, si usted necesita para rodear cada imagen con un espacio de canal de 20px, el estilo debería parecerse a lo siguiente: (ver referencia 4)

< div estilo = "padding: 20px" >< img src="img1.jpg" >< / div >< div estilo = "padding: 20px" >< img src="img2.jpg" >< / div >< div estilo = "padding: 20px" >< img src="img3.jpg" >< / div >< div estilo = "padding: 20px" >< img src="img4.jpg" >< / div >

La propiedad padding añadirá espacio dentro de la div a la parte superior, derecho, inferior e izquierda de las imágenes.

9 Guardar los cambios y obtener una vista previa la página en su navegador.

Consejos y advertencias

  • Crear una tabla que contenga tus imágenes y añadir el atributo cellspacing a la etiqueta table para controlar la cantidad de espacio entre las células individuales. Por ejemplo, si desea agregar un espacio de 20px alrededor de cada imagen, el código de etiqueta de mesa debería parecerse a lo siguiente:
  • < table cellspacing = "20" >
  • Para quitar las líneas que rodean cada celda de la tabla, añadir el siguiente atributo (con comillas) a la etiqueta table:
  • frontera = "0"
  • Previsualizar su sitio web con diferentes navegadores y en una variedad de dispositivos móviles. Realizar ajustes en su espacio de la imagen para que tantos espectadores como sea posible serán capaces de ver su trabajo en la forma en que su intención.