Gap between Img and div

Question

I have an img and div i can't find why there is a gap. I have seen so question. But it is not working for me i have also tried using margin:0. here is my My fiddle. But i cant find why this gap is here. Thanks

<img src="http://www.kidsmathgamesonline.com/images/pictures/shapes/rectangle.jpg" class="header"/>         
<div class="body-middle">

</div>

css is:-

.header
{
width:100%;     
height:auto;
padding:0px;
margin:0px;
}

.body-middle
{
height:50px;
width:100%;
margin:0 auto;  

background:url('http://www.clipartsfree.net/vector/large/simple_green_rectangle_Vector_Clipart.png') 0 0 repeat;
background-size:contain;
background-position:center top;
}

Does this help? http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image — , Dec 30 '13 at 06:36

score 3 · Accepted Answer · answered Dec 30 '13 at 06:05

3

Give display:block to the image.

.header{
    display:block;
}

Updated fiddle here.

answered Dec 30 '13 at 06:05

codingrose

15,563
11
39
58

@Hiral could you please explain how `display:block` helps here. – Kathir Dec 30 '13 at 07:01
2

@Kathir by default, image is inline. inline elements leave white space between elements. – codingrose Dec 30 '13 at 07:11
@Hiral Thanks for your valuable info. – Kathir Dec 30 '13 at 07:27

score 0 · Answer 2 · answered Dec 30 '13 at 06:05

0

.body-middle {
    margin-top: -50px; //adjust number of pixels to what works best for you
}

answered Dec 30 '13 at 06:05

CRABOLO

8,605
39
41
68

score -1 · Answer 3 · answered Dec 30 '13 at 06:07

-1

Try This CSS..

*{
 margin:0;
}

DEMO

answered Dec 30 '13 at 06:07

Sridhar R

20,190
6
38
35

Gap between Img and div

3 Answers3

Linked