图片margin-bottom干扰行高求助：左对齐图片文字环绕布局调试

Hey Adam, let's break down why your margin-bottom is getting combined with extra line-height space, and how to fix it.

The Root Cause #

Your image is an inline-block element by default, which means browsers align it to the text baseline. Even when floated, this baseline alignment can leave extra space below the image (pulled from the parent text's line-height) that gets added to your margin-bottom, making the total spacing larger than expected.

Solution 1: Make the Image a Block Element #

Adding display: block to the image removes inline-block baseline alignment entirely, so your margin-bottom will behave exactly as you set it:

<p style="overflow: hidden;"> <!-- Prevents parent container collapse -->
  <img style="float: left; margin-right: 15px; margin-bottom: 15px; display: block; width: 307px; height: 63px;" src="/image/logo.png" alt="Logo">
  Here is the floating text.. 
</p>

The overflow: hidden on the parent <p> ensures the container wraps around the floated image and text, avoiding layout collapse.

Solution 2: Adjust Vertical Alignment #

If you want to keep the image as inline-block (though not necessary for floated elements), setting vertical-align: bottom aligns the image's bottom to the text's bottom, eliminating the baseline-related extra space:

<p>
  <img style="float: left; margin-right: 15px; margin-bottom: 15px; vertical-align: bottom; width: 307px; height: 63px;" src="/image/logo.png" alt="Logo">
  Here is the floating text.. 
</p>

For Your height:4em Attempt #

If you stick with setting a fixed height in em units, apply either of the fixes above alongside it. The baseline alignment issue still applies regardless of how you set the image's height, so adding display: block or vertical-align: bottom will ensure your margin-bottom doesn't get inflated by line-height.

内容的提问来源于stack exchange，提问作者Adam