Foros del Web » Creando para Internet » HTML »

HTML, Imágenes y saltos de línea

Estas en el tema de HTML, Imágenes y saltos de línea en el foro de HTML en Foros del Web. Una duda básica que tengo de HTML, quiero insertar una imagen y lo hago de la siguiente manera: Código HTML: <p> <img style= "max-width: 100%; ...
  #1 (permalink)  
Antiguo 22/05/2020, 06:33
Avatar de senseeye3led  
Fecha de Ingreso: abril-2016
Ubicación: 127.0.0.1
Mensajes: 144
Antigüedad: 4 años, 1 mes
Puntos: 8
Pregunta HTML, Imágenes y saltos de línea

Una duda básica que tengo de HTML, quiero insertar una imagen y lo hago de la siguiente manera:

Código HTML:
<p><img style="max-width: 100%; width: auto; height: auto; display: block; margin-left: 4%; margin-right: auto;" src="https://my_domain/img/newsletter/image.jpg" alt="Mi Alt" align="left" /></p> 
Después añado varios <br/> para poder escribir el texto debajo de la imagen.

En la pantalla del PC lo veo correctamente, ya que puedo saber cuandos <br/> poner; pero si lo veo desde un móvil son demasiados <br/> por lo que queda mucho espacio entre la imagen y el texto.

¿Cómo se hace para insertar una imagen en un HTML, realizar un "salto de linea" / "intro" tras la imagen y después añadir el texto?

No sé si se puede hacer de manera generica sin depender del tamaño de las pantallas.
  #2 (permalink)  
Antiguo 22/05/2020, 06:51
 
Fecha de Ingreso: abril-2011
Mensajes: 125
Antigüedad: 9 años, 2 meses
Puntos: 44
Respuesta: HTML, Imágenes y saltos de línea

Es preferible que utilices márgenes de CSS en lugar de la etiqueta <br>.

Código CSS:
Ver original
  1. img {
  2.     margin-bottom: 100px;
  3. }

La etiqueta <br> está pensada únicamente para texto, y el texto suele ser redimensionado por los navegadores móviles.



La zona horaria es GMT -6. Ahora son las 14:05.