Cómo dibujar una línea vertical para separar el texto HTML de la imagen

HTML no ofrece una solución tan limpia para líneas verticales como para líneas horizontales, una vertical equivalente a la

1.

Configure su imagen dentro de su texto y agregue una etiqueta de atributo "estilo". Por ejemplo, el código HTML de su imagen puede verse así:

2.

Defina el borde dentro del atributo "estilo". Por ejemplo, si desea que un borde se aplique a toda la imagen, el CSS se vería así:

Esta es una configuración de borde abreviada: el primer valor establece el ancho del borde, el segundo define el tipo de borde y el tercero establece el color. Los bordes pueden ser sólidos, punteados, discontinuos o dobles; o puede especificar un borde 3-D como surco, cresta, inserción o inicio.

Si desea aplicar el borde a un solo lado para crear una verdadera línea vertical, debe usar "borde izquierdo" o "borde derecho" en lugar de "borde".

3.

Agrega relleno para crear un espacio entre tu imagen y texto. Si desea que el borde esté a 5 píxeles de la imagen, agregue "padding: 5px;" a su etiqueta de estilo. Puede especificar el relleno en un solo lado usando, por ejemplo, "padding-left: 5px;". Si desea crear un espacio entre el borde y el texto, use un margen. También deberá especificar su URL de imagen para la etiqueta "src". Cuando lo pones todo junto, tu código podría verse así:

4.

Guarde y pruebe su HTML para confirmar que el borde se muestra como lo desea.