Tecnología

Inicio

Cómo insertar un espacio entre una imagen y texto en HTML y CSS

June 29

Insertar al menos unos pocos píxeles de espacio entre una imagen y el texto que lo rodea hace que para un diseño menos desordenado y el texto que es más fácil de leer. Se puede controlar el espacio entre el borde de una imagen y el texto que lo rodea hasta el píxel utilizando el CSS o Cascading Style Sheet, atributo "margen". O bien, puede insertar este atributo directamente en la etiqueta HTML correspondiente a la imagen en su lugar. Se puede especificar un tamaño de margen para los cuatro lados de los márgenes diferentes gráficas o de lista para cada lado.

Instrucciones

1 Abrir el archivo o página Web que contiene el código HTML para su imagen y texto. Ubicar etiqueta HTML de la imagen, que comienza con "<IMG".

2 Escriba el siguiente atributo dentro de la etiqueta IMG:

style = "margin: 10px;"

Por ejemplo, la etiqueta IMG podría tener este aspecto:

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

Cambiar el número 10 de cualquier otro número de su elección. Esto crea la misma cantidad de espacio en los cuatro lados de la imagen.

3 Escriba lo siguiente dentro de la etiqueta IMG para especificar diferentes márgenes para cada lado:

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

Cambie cada número en el tamaño del margen deseado.

4 Guardar o publicar la página.

Consejos y advertencias

  • En lugar de píxeles ( "píxeles") también se pueden definir en un margen en unidades de em. Una em es un número igual de puntos con el tamaño de la fuente actual. Por ejemplo, si el tamaño de fuente general si es de 12 puntos, 1 em es de 12 puntos.
  • Se pueden especificar varios márgenes en forma abreviada con el siguiente código:
  • style = "margin: 10px 2px 5px 17px;"
  • El primer número se refiere al margen de la parte superior y luego se mueve hacia la derecha (derecha, abajo, izquierda).