Search code examples
htmlcss

How to prevent extra bottom margin when floating an image with text

I have a block consisting of an image with text wrapping around it:

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

H H H

Where * represents the image, T represents text, and H is a header that follows the text/image block.

I need CSS rules that satisfy both of these conditions:

  1. The text should float around the image, while the image itself has right and bottom padding to prevent the text from sticking to it.
  2. The text/image block should not have an extra bottom margin or padding, or at least have a collapsible one, so that the spacing between H and the text/image block is controlled solely by H's margin-top.
  3. This works fine when there is enough text to exceed the height of the image. However, I can't solve the issue when there isn't enough text:
* * * T T T
* * * T T T
* * * T T T
* * *  
* * *  
    
H H H

In this case, the image's margin doesn't collapse and instead adds to H's margin-top, which creates unwanted extra space.

How can I achieve the desired behavior?

Here’s an example demonstrating the issue:

.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>

Solution

  • Changing the container margin from margin-bottom: 30px to margin-bottom: -15px can help to accomplish this.

    The margin-bottom of the image, and the margin-bottom of the p, see to it that there is always 15px spacing at the bottom of the container, no matter which of the two scenarios we are in. The margin-bottom of the paragraph (1em, 16px with default font size) is coming from the user agent style sheet. To not have to rely on that, or to have an appropriate margin-bottom for cases where the content might be something else than paragraphs, you could apply margin-bottom: 15px to whatever the last child of the container is.

    This spacing at the bottom of the container then gets compensated by the margin-bottom: -15px on the container itself.

    .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>