Como desenhar uma linha vertical para separar o texto HTML da imagem

O HTML não oferece uma solução tão limpa para linhas verticais quanto para linhas horizontais - uma vertical equivalente à

1

Defina sua imagem no texto e adicione uma tag de atributo "estilo". Por exemplo, o código HTML da sua imagem pode ser algo como isto:

2

Defina a borda dentro do atributo "style". Por exemplo, se você quiser que uma borda seja aplicada à imagem inteira, o CSS ficaria assim:

Essa é uma configuração de borda abreviada - o primeiro valor define a largura da borda, o segundo define o tipo de borda e o terceiro define a cor. As bordas podem ser sólidas, pontilhadas, tracejadas ou duplas; ou você pode especificar uma borda 3-D como groove, cume, inserção ou início.

Se você quiser aplicar a borda a apenas um lado para criar uma linha vertical verdadeira, use "borda esquerda" ou "borda direita" em vez de "borda".

3

Adicione preenchimento para criar algum espaço entre sua imagem e texto. Se você quiser que a borda fique a 5 pixels de distância da imagem, adicione "preenchimento: 5px;" à sua tag de estilo. Você pode especificar o preenchimento em apenas um lado usando, por exemplo, "padding-left: 5px;". Se você quiser criar espaço entre a borda e o texto, use uma margem. Você também precisará especificar o URL da sua imagem para a tag "src". Quando você coloca tudo junto, seu código pode ser parecido com isto:

4

Salve e teste seu HTML para confirmar que a borda está sendo exibida como você pretende.