CODEWITHSUNDEEP
css
user2469520
user2469520

Reputation:

Odd space between image and div (CSS)

This is kind of trivial, but I have a frequent problem with divs and images that are separated by spaces when they ought to nest flush against each other.

Below is some code I'm wrestling with right now. As you can see, the second div (class Shadow2) contains an image, followed by a div containing text. The class Black gives the caption a black background. Thus, visitors should see nothing but an image above a black box with white text. Instead, the default background color of Shadow2 can be seen between the img and the caption div.

<div class="Cool R P Max300">
  <div class="Shadow2">
    <img src="">
    <div class="Caption Black">Text</div>
  </div>
</div>

I added styles setting all images' border and padding to 0 and setting div.Caption's top margin to 0, but it doesn't change anything.

I could fix the problem by applying relative position to the image and lowering it a few pixels, but that seems like a pointless fix for what must be a common bug. Can anyone tell me what's going on here? Thanks.

Upvotes: 0

Views: 839

Answers (1)

Shomz
Shomz

Reputation: 37701

There is probably some white-space causing this line break. Simply setting the image to display: block; solves the issue. Also, don't forget to close your img tag (<img src="" alt="" />), but that's not related to the white space.

See it here: http://jsfiddle.net/fkfF7/

The other, hackish solution, is to put font-size: 0; on the parent div. Of course, you'd have to specify the font size for you caption div then.

Here's that one: http://jsfiddle.net/fkfF7/1/

Upvotes: 2

Related Questions