Question

我有一个img和div我无法找到存在差距的原因。我见过so question。但它不适合我，我也试过使用保证金：0。这是我的My fiddle。但我无法找到为什么这个差距在这里。谢谢

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

</div>

css是： -

.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;
}

Answer 1

将display:block提供给图片。

.header{
    display:block;
}

Updated fiddle here.

Answer 2

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

Answer 3

试试这个CSS ..

*{
 margin:0;
}

DEMO

Img和div之间的差距

3 个答案: