Início / coding / Perguntas / 79432215
Accepted
Denis Kulagin
Asked: 2025-02-12 15:03:52 +0800 CST

Como evitar margem inferior extra ao flutuar uma imagem com texto

  • 772

Tenho um bloco que consiste em uma imagem com texto em volta dela:

* * * T T T
* * * T T T
* * * T T T
T T T T T T

H H H

Onde *representa a imagem, Trepresenta o texto e Hé um cabeçalho que segue o bloco de texto/imagem.

Preciso de regras CSS que satisfaçam ambas as condições:

  1. O texto deve flutuar ao redor da imagem, enquanto a imagem em si tem preenchimento direito e inferior para evitar que o texto fique grudado nela.
  2. O bloco de texto/imagem não deve ter margem inferior ou preenchimento extra, ou pelo menos ter um que possa ser recolhido, para que o espaçamento entre H e o bloco de texto/imagem seja controlado somente pela margem superior de H.
  3. Isso funciona bem quando há texto suficiente para exceder a altura da imagem. No entanto, não consigo resolver o problema quando não há texto suficiente:
* * * T T T
* * * T T T
* * * T T T
* * *  
* * *  
    
H H H

Nesse caso, a margem da imagem não é recolhida e, em vez disso, é adicionada à margem superior de H, o que cria espaço extra indesejado.

Como posso alcançar o comportamento desejado?

Aqui está um exemplo que demonstra o problema:

.container {
  max-width: 600px;
  margin-bottom: 30px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 150px;
  height: auto;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.header {
  margin-top: 30px;
}
<div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it.

  </p>
</div>

<h3 class="header">Header</h3>

html

3 respostas

  1. Já que você está usando um pseudoelemento para limpar o float, você pode usá-lo para adicionar uma margem negativa. Você também tem que adicionar a mesma margem ao p(ou qualquer último elemento no contêiner)

    .container {
  max-width: 600px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px; /* here */
  width: 110px;
}

.container::after {
  content: "";
  display: block;
  clear: both;
  margin-bottom: -15px; /* here */
}

.container > :last-child {
  margin-bottom: 15px; /* here */
}

.header {
  margin-top: 30px; /* header margin */
}

p {
  margin: 0; /* remove default p margin */
}
    <div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it.

  </p>
</div>

<h3 class="header">Header</h3>

    • 1
  2. Best Answer

    Alterar a margem do contêiner de margin-bottom: 30pxpara margin-bottom: -15pxpode ajudar a fazer isso.

    A margin-bottom da imagem e a margin-bottom do p, garantem que sempre haja espaçamento de 15px na parte inferior do contêiner, não importa em qual dos dois cenários estejamos. A margin-bottom do parágrafo ( 1em, 16pxcom tamanho de fonte padrão) vem da folha de estilo do agente do usuário. Para não ter que depender disso, ou para ter uma margin-bottom apropriada para casos em que o conteúdo pode ser algo diferente de parágrafos, você pode aplicar margin-bottom: 15pxa qualquer que seja o último filho do contêiner.

    Esse espaçamento no fundo do recipiente é então compensado pelo margin-bottom: -15pxpróprio recipiente.

    .container {
  max-width: 600px;
  margin-bottom: -15px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}

.container > :last-child {
  margin-bottom: 15px;
}

.float-image {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 150px;
  height: auto;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.header {
  margin-top: 30px;
}
    <div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it.
  </p>
</div>

<h3 class="header">Header</h3>

<div class="container">
  <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
  <p>
    This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it. This is an example of an image floated to the left with text wrapping around it.
    </p>
</div>

<h3 class="header">Header</h3>

    • 1

  3. Removi as margens e o preenchimento padrão de todos os elementos e também removi a margem inferior do contêiner.

    Como a imagem já tem margens de buffer, acho que deve funcionar.

    * {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  display: block;
}


.float-image {
  float: left;
  margin: 0 15px 15px 0;
  width: 150px;
  height: auto;
}

.container::after {
  content: "";
  display: block;
  clear: both;
}
    <div class="container">
  <p>
    <img src="https://dummyimage.com/150x150/c6ff83/000000" alt="Example Image" class="float-image">
    This is an example of an image floated to the left with text wrapping around it.
  </p>
</div>

<h3 class="header">Header</h3>

    • -2

relate perguntas