Space between div and img?

Question

I have code like this:

        
  
            
1. Orange
            
some text in here 
                   


        
                      

              相关标签:
       
      

Answer 1

that's because there is whitespace between the tags

do:

</div><img class="separator" src="images/separator.png" /> 

Answer 2

I had a 3px gap between an image and div tag. Also all styles were set to 0. Really weird.

The fix:

img {
   vertical-align: middle;
}

This worked beautifully for me.

Answer 3

With no screenshots to refer to I'm left in the dark on what you want, so this is all guessing.

I'm guessing from class="separator" that you are trying to break up your content with a horizontal line. Shouldn't you be using <hr /> with appropriate styling if that's the case?

In any case, note that <p> elements have vertical margins set by default.

I don't see why you want the separator right up snug against your text, because it visually doesn't make sense to me.

If you really do, there's a bunch of options:

1. Set margin-bottom: 0; on the <p>
2. Set margin-top: -*px; on .separator where you're assuming you're always going to have an element right before the separator with bottom margin of *px
3. #sc p:last-child { margin-bottom: 0; } and IE9.js for letting older Internet Explorer versions support it

But I reiterate; no margin between text and a separator doesn't sound right to me.

Answer 4

Add display: block; to the .separator image.

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

The problem is that images can sometimes add a bit of magic space up/below them, I have this issue whenever I'm working with image elements as *block* elements.