¿Cómo crear espacios entre imágenes en una página web?

Escrito por ty arthur | Traducido por jaime alvarez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
¿Cómo crear espacios entre imágenes en una página web?
Es fácil introducir imágenes usando directamente el código de HTML.

Aunque es muy fácil agregar cualquier número de imágenes a un sitio web, muchas personas no saben cómo crear correctamente la cantidad exacta de espacios entre las imágenes que desean para propósitos de diseño. Debido a que los diferentes navegadores web muestran imágenes e interpretan los códigos de maneras diferentes, es posible que necesites probar varias soluciones de HTML y de CSS para lograr que las imágenes se muestren correctamente.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Accede a tu cuenta con tu proveedor de alojamiento web y navega en el sistema de gestión de archivos en el que guardas los archivos HTML para tu sitio web. Elige la opción de editar la página HTML en la que deseas modificar una imagen que hayas subido.

  2. 2

    Encuentra la etiqueta <IMG SRC> que tiene la ubicación de la imagen a la que necesitas añadir espacio en los lados. Añade en un atributo adicional al final de la etiqueta para crear el espacio. Escribe el atributo "ALIGN" si tienes tres o menos imágenes en una fila y no hay texto a los lados. Utiliza el atributo para especificar en qué lado de la página debe aparecer la imagen, tal como <A HREF="http://webpage.com/image.gif" ALIGN="LEFT"> o <A HREF = "http: / / webpage.com / imagen.gif "align =" center ">

  3. 3

    Guarda el archivo HTML y tratar de ver la página web en múltiples navegadores para asegurarte de que las imágenes tienen suficiente espacio entre ellas. Edita el archivo de nuevo si las imágenes no se muestran de la manera que deseas. Vuelve a la etiqueta <IMG SRC> y en su lugar añade los atributos de "HSPACE" y "VSPACE" para un mayor nivel de control sobre el espacio en blanco horizontal y vertical alrededor de una imagen. Escribe el número de píxeles de espacios en blanco que deseas alrededor de la imagen en cada dirección, tal como <A HREF="http://webpage.com/image.gif" HSPACE="5" VSPACE="5">.

  4. 4

    Después de guardar el archivo de nuevo, comprueba cómo se visualizan las imágenes. Vuelve al archivo HTML de nuevo si las imágenes no tienen la cantidad correcta de espacio que deseas.

  5. 5

    Rediseña tu sitio web utilizando CSS en lugar de HTML normal si el espacio alrededor de las imágenes aún no es correcto. Especifica que estás usando CSS escribiendo <style type="text/css"> entre las etiquetas de <head> y <body> de la página. Escribe el carácter "{" para indicar que se va a agregar un nuevo elemento. Escribe el código "background-image: url ('http://webpage.com/image.gif');" en la línea siguiente para especificar que el nuevo elemento será la imagen que deseas mostrar. Utiliza la etiqueta de "posición" para especificar exactamente en qué parte de la página irá la imagen, tal como "background-position: 100px 150px;" Añade tus otras imágenes en la página utilizando las mismas etiquetas CSS y deja espacios entre el número de píxeles para crear espacio entre las imágenes. Por ejemplo, si colocas una en "100 pix, 150 px" y otra en "150 px, 200 px" tendrán 50 píxeles de espacio entre ellas.

Consejos y advertencias

  • Algunas versiones más recientes de los navegadores más importantes no son compatibles con la etiqueta "ALIGN" y simplemente la ignoran.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles