Como alinhar o texto ao redor de imagens inseridas em artigos no WordPress

Olá pessoal hoje vou ensinar como alinhar o texto ao redor de uma imagem (foto), inseridas em artigos no wordpress. Ou em site HTML.

Bem, vou destacar duas possibilidades. Uma possibilidade é inserindo o código diretamente na tag IMG em HTML e outra é editando a folha de estilo Style.css e chamando posteriormente o estilo na tag IMG em HTML. 

A opção de editar a folha de estilo tem a vantagem de usar um código menor na tag IMG, mas em contrapartida você fica limitado a fazer ajustes nos valores das distâncias das margens/bordas entre o texto e a imagem individualmente, pois ficaria definido para todas imagens na folha de estilo. Bem, você entenderá melhor mais para frente. Já na opção de inserir o código por completo na tag IMG sem usar a folha de estilo, você pode definir os valores das distâncias das margens/bordas entre o texto e a imagem individualmente. Neste artigo, na imagem aqui inserida à esquerda temos o seguinte código:

<img style="border: 0pt none; float:left; padding-right:10px; padding-bottom:1px" title="" src="http://www.meusite.com.br/minhaimagem.jpg" alt="...>

O que nos interessa para quebrar o texto ao redor da imagem é a inserção do código marcado em vermelho na tag IMG acima. Então temos:

float:left – Aqui em float utilizei left para indicar que a imagem fica posicionada à esquerda. Se fosse à direita seria right;
padding-right:10px – Neste caso estando a imagem à esquerda (left), em padding-right usa-se o right para  informar a distância em pixels que o texto vai ter da margem/borda direita (right) da imagem. Aqui todo texto inicia afastado 10 pixels à direita da borda da imagem;
bottom:1px – Aqui em bottom é informado a distância em pixels que o texto vai ter da margem/borda inferior (bottom) da imagem. Aqui todo texto inicia afastado 1 pixel abaixo da borda inferior da imagem.

Como isso fica na prática? 

No final deste artigo veja sobre o autor?  Criei o código h2 colocando a esquerdo o título: SOBRE O AUTOR

E em seguida coloquei minha foto com o texto justificado.

No caso de blog ou site você só precisa fazer uma única vez, e toda vez que publicar um novo artigo já aparece no rodapé. Veja como ficou no final deste artigo minha descrição.

  Este é o código de programação em html, ou em php

<h2 align='left'>Sobre o Autor</h2>

<img style="border: 0pt none; float:left; padding-right:10px; padding-bottom:1px" title="" src='https://lh3.googleusercontent.com/--BrAQdRnq50/AAAAAAAAAAI/AAAAAAAAGyc/KP6qKKZNsyQ/s80-c/photo.jpg'/>

<p align='justify'>Valdivino Sousa é Professor, Matemático, Pedagogo, Contador, Bacharel em Direito e Escritor. Possui mais de 20 anos de experiência na área Contábil, desde 2005 é Contador responsável da Alves Contabilidade e Consultoria Tributária. Criador do método X Y Z que facilita na aprendizagem de equação e expressão algébrica com objetos ilustrativos. Docente nos cursos de Matemática, Ciências Contábeis, Administração e Engenharia. Autor de mais de 10 (dez) livros e têm vários artigos publicados em revistas e jornais especializados. Blogueiro Mtb 60.448, Consultor e Estrategista de Mídias Digitais. Semanalmente escreve para o portal D.Dez, Jornal da Cidade e Folha Online. Sobre: Comportamento, Educação Matemática e Desenvolvimento da Aprendizagem. Tem experiência na área de Matemática, com ênfase em Equações Diferenciais Parciais, Matemática Computacional e Engenharia Didática, atuando principalmente nos seguintes temas: métodos numéricos, equações diferenciais, modelagem, simulações e didática no ensino de matemática. Contatos: E-mail: valdivinosousa.mat@gmail.com Celular / Whatsap: 11 &#8211; 9.9608-3728</p>

<p>

</p>

 Agora veja como ficou excelente!