CODEWITHSUNDEEP
htmlcssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152687

How to remove extra margin-bottom from floating image?

When we use <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p> then how can we have the same margin at right and bottom of the image?

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

Upvotes: 12

Views: 15528

Answers (8)

Daniel Kvist
Daniel Kvist

Reputation: 3042

I had this problem too, and I solved it by putting the <img>-tag in a <div>, with the line-height property set to 0.

Here is a jsfiddle.net example.
Notice how there is no space between the image and the <hr> below it.

This does not work if you need to put the image in the middle of a text, because the image will be ot its own line, with the text before it on the previous line, and the text after it on the next line, like here.

Upvotes: 0

Sylvestre Lucia
Sylvestre Lucia

Reputation: 19

It's because it's certainly an inline content. If you want to keep the content inline but remove the spacing, just add :

line-height: 0;

Upvotes: 1

tiborka
tiborka

Reputation: 149

from: http://bytes.com/topic/html-css/answers/789019-img-bottom-margin-mystery

It's because imgs are display: inline, so they sit on the baseline like text, with a bit of space below them for descenders.

Make the img display: block.

Upvotes: 0

Sachin Kumar
Sachin Kumar

Reputation: 996

Use property vertical-align: bottom; to image, then the extra space from bottom will be deleted.

Upvotes: 35

Lastnico
Lastnico

Reputation: 1471

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.

Upvotes: 1

Robert Koritnik
Robert Koritnik

Reputation: 105029

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.

Upvotes: 2

BitDrink
BitDrink

Reputation: 1193

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!

Upvotes: 1

Lastnico
Lastnico

Reputation: 1471

Maybe:

<style>

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

Upvotes: -1

Related Questions