html - How to prevent extra bottom margin when floating an image with text - Stack Overflow

admin管理员组

文章数量:1295334

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="" 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>

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/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
• css

Share Improve this question Follow edited Feb 12 at 7:13 Denis Kulagin asked Feb 12 at 7:03 Denis KulaginDenis Kulagin 8,9471919 gold badges7171 silver badges137137 bronze badges 8

• @mplungjan It already in the post: codepen.io/-Denis-Kulagin/pen/jEOOQGj – Denis Kulagin Commented Feb 12 at 7:10
• 1 @DarkBee Got it. Done. – Denis Kulagin Commented Feb 12 at 7:11
• Instead of margin-bottom: 30px;, give the container margin-bottom: -15px; - that should get you what you want in both scenarios, no? – C3roe Commented Feb 12 at 7:19
• @C3roe Yep, I checked, and it seems to work just fine. Could you turn it into an answer? An explanation of why it works and how it handles edge cases would also be appreciated. – Denis Kulagin Commented Feb 12 at 7:25
• 1 I'm just realizing, it works in this instance, because p has a default margin bottom of 1em, or 16px. (So both situations currently not exactly the same, 1px difference.) So there is always that 15px/16px space at the end of the container, which gets compensated for by the negative -15px of the container itself. – C3roe Commented Feb 12 at 7:45

 |  Show 3 more comments

3 Answers 3

Sorted by: Reset to default 1

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

Since you are using a pseudo-element to clear float you can use it to add a negative margin. You also have to add the same margin to the p (or any last element on the container)

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

I have removed the default margins and padding of all the elements and removed the margin-bottom of container as well.

As the image is already having buffer margins then I think it should work.

* {
  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/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>

本文标签： htmlHow to prevent extra bottom margin when floating an image with textStack Overflow