How to remove extra margin-bottom from floted image ?

Question

When we use <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p> the how to give same margin at right and bottom of the image.

http://jitendravyas.com/image-margin.htm

Answer 1

A solution should be:

<style>
img{
    float: left;
    margin: 0 20px 20px 0;
    background-color: #CCC;
}

p{
    clear: left;
    margin: 0px;
}
</style>

<p><img height="100" width="100" />dummy text dummy text dummy text dummy text</p>
<p>here some text</p>

You can clear the floating by applying the "clear: left;" to any tag after the "p". However, I prefer the solution below (it solves the containing issue of the "p" tag, too):

<style>
img{
    float: left;
    margin: 0 20px 20px 0;
    background-color: #CCC;
    }
p{
    margin: 0px;
    }

div.clearer{
    clear: left;
    }

#container{
    width: 300px;
    border: 1px solid #CCC;
}
</style>

<div id="container">
    <img height="100" width="100" />
    <p>dummy text dummy text dummy text dummy text</p>
    <div  class="clearer"></div>
</div>
<p>here some text</p>

---

EDIT: My suggestion is the same even in the case of your example (however, in this example you can remove the "clear:left" applied to the "p" tag and you can't use the second method I've suggested)! The behavior of the tags "p" and "img", in the example, it's normal ... I try to explain:

if you set the line-height of the paragraph to 20px (with a font-size < 20px) and the margin (bottom and right) of the img (whose height is a multiple of 20) to 20px, the line at the bottom of the img is forced to split to the right if there aren't at least 40px (20px margin-bottom + 20px line-height) below the img! That it's normal, because there isn't enough space for a line of 20px height!

So, you can choose or to set the margin to a value minor than 20px or to reduce the line-height!

Answer 2

Maybe:

<style>

p img {
   margin: 0px;
}
</style>

Answer 3

Problematic image height

Your image seems to exceed line-height setting by 5px exactly. That's why you're getting this excess space.

You can try negative bottom margin on this image only, but text may come too close to it. The amount of negative margin needed equals excess pixels (in the case of this image it's 5px).

Container DIV

You could however wrap your images in container DIVs that would have an exact line-height multiple height. And also set overflow: hidden; on them as well. But I suggest you set font-size and line-height to points (pt), to control their values.

Answer 4

Okay, after having a look to the page, this is not a margin problem, but the fact that your font has not any space to be including at the next line.

Try to change the font size, and you will see that this margin is sometimes reducing, sometimes increasing.