16.02.2025

Envolvendo Texto com Imagens em HTML/CSS: Um Guia Detalhado

Resumo Rápido

Para garantir que o texto envolva as imagens harmoniosamente, usamos a propriedade float no CSS. Definindo a imagem como float: left; ou float: right;, você pode ajustar o espaçamento com margin.

<!-- Exemplo: Criando texto que envolve uma imagem -->
<img src="imagem.jpg" alt="" style="float: left; margin: 0 10px 10px 0;">
<p>Seu texto começa aqui...</p>

Fique atento a como as propriedades float e margin afetam o posicionamento dos elementos e a formação de espaçamento.

Posicionamento das Imagens

A posição da imagem no texto influencia o efeito que ela cria. Pode empurrar o texto para o plano de fundo ou, ao contrário, criar uma composição unificada com ele.

Imagem à Esquerda

<!-- Alinhando a imagem à esquerda -->
<img src="imagem.jpg" alt="" style="float: left; margin-right: 10px;">
<!-- Espaço para o texto -->

Imagem à Direita

<!-- Alinhando a imagem à direita -->
<img src="imagem.jpg" alt="" style="float: right; margin-left: 10px;">
<!-- Espaço para o texto -->

Imagem Centralizada - Parceiros de Texto

<div style="text-align: center;">
  <img src="imagem.jpg" alt="">
</div>
<!-- Espaço para o texto -->

Ao criar composições centralizadas, é recomendado usar CSS Grid ou Flexbox para um controle adicional sobre o envolvimento do texto.

Envolvendo Texto em Imagens com Formatos Inusitados

Para criar texto que envolve imagens com formatos não convencionais, use a propriedade shape-outside. Aqui está um exemplo para imagens circulares:

/* Design para imagem circular */
.imagem-circular {
  border-radius: 50%;
  float: left;
  shape-outside: circle(50%);
  margin-right: 10px;
}

Markup HTML:

<img src="imagem-circular.jpg" alt="" class="imagem-circular">
<!-- Seu texto começa aqui -->
<p>E o texto se envolve ao redor da imagem...</p>

A propriedade shape-outside permite a criação de várias formas de texto usando círculos, elipses e polígonos.

Design Responsivo para Tamanhos de Imagem e Envolvimento de Texto

Para garantir a exibição adequada em vários dispositivos, faça as imagens responsivas usando as propriedades width e margin. Para telas pequenas, aplique media queries:

/* Regras para telas pequenas */
@media (max-width: 600px) {
  img {
    float: none;
    margin: 0 auto;
    display: block;
  }
}

Layout Limpo e Controle de Overflow

Para evitar que o texto sobreponha uma imagem, use overflow: hidden, que ajuda a controlar a distribuição dos parágrafos:

/* Layout de texto ao redor da imagem sem erros desde 1996 */
.envolvimento-texto {
  overflow: hidden;
}

.envolvimento-texto::after {
  content: "";
  display: table;
  clear: both;
}

O uso adequado de margens e espaços ajudará a manter a legibilidade do texto.

Layout Avançado com Formas CSS

Se surgirem dificuldades com a interação entre texto e imagens, as Formas CSS podem ser úteis:

/* Formas incomuns para layouts únicos */
.imagem-forma {
  float: left;
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Para personalização detalhada de tais layouts, sandboxes online, como jsfiddle, são convenientes para uso.

Visualização

Tente imaginar como o texto se envolve ao redor de uma imagem, semelhante a como a água flui ao redor de uma pedra 🌊➡️🪨:

Texto 🌊: "Lorem ipsum dolor sit amet, consectetur..."

Vamos adicionar nossos fluxos de texto ao redor da pedra 🪨:

<!-- Aqui começa a batalha pela atenção do leitor -->
<img src="pedra.png" style="float: left;" alt="Pedra">

O texto se adapta: "Lorem ipsum dolor sit amet, consectetur..."
                                  "adipiscing elit. Sed do eiusmod..."

O texto "envolve" a imagem, formando uma combinação natural:

Antes:  | Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Depois: | 🪨 Lorem ipsum dolor sit amet, consectetur adipiscing...
         | elit. Sed do eiusmod tempor incididunt ut labore et dolore magna.

Dicas Profissionais

1. Cor de Fundo: Use background-color para destacar a imagem em relação ao fundo do texto.
2. Pseudo-elementos: Elementos transparentes ajudarão a manter a estrutura e a distribuição do conteúdo.
3. Margens e Espaços: Importantes para a separação visual entre texto e imagens.
4. Combinação de Floats: A prática de usar float: left; e float: right; abre possibilidades interessantes para o posicionamento do texto.
5. Ferramentas Modernas: Para maior controle, utilize CSS Grid e Flexbox.

Recursos Úteis

1. float - CSS — float é usado para controlar o posicionamento dos elementos na página.
2. Flexbox | CSS-Tricks — Flexbox oferece flexibilidade para posicionar elementos.
3. float e clear — Ilustra a interação entre float e clear.
4. Guia do CSS Grid — CSS Grid é uma ferramenta para planejar espaço no desenvolvimento web.
5. shape-outside - CSS — shape-outside permite que o texto se moldure ao redor das imagens.
6. Contexto de formatação em bloco - CSS — Explore contextos de formatação em bloco para entender melhor os limites no CSS.

Video

Navigation