html - 在图像下方放置一个 div 时获得某​​种边框？

Question

所以我有一个宽度为 100% 的图像，并且我有一个 div，我想将其直接放置在该图像的下方。图像和 div 之间似乎有某种边界或线，我似乎无法摆脱，我知道这是从背景中得出的，我不想使用固定位置，因为那样它就不会在各种决议中，它都在它的正下方。我试过将 body padding 和 margin 重置为 0，但它似乎没有帮助。

HTML:

    <header>

        <img class="forumheader" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/50356_434008550256_1008261_n.jpg"/>

    </header>

    <div class="content">
        I am a content.
    </div>

CSS:

.content{
height:400px;
width:100%;
background: #202020;
}

body{
background:#ff00ff;
margin:0;
padding:0;
}

这是一个 jsfiddle:http://jsfiddle.net/AYnaN/由于尺寸原因，该 jsfiddle 中的图像没有 100% 的宽度，但我的应用程序中的图像具有 100% 的宽度。

Answer 1

在大多数浏览器中，图像默认具有 display:inline-block; 或 display:inline; 样式。因此它被视为文本，浏览器显示此附加行以分隔文本行。

尝试提供图像:style="display:block;"。还要记住将边距设置为 0:style="margin:0px;"。

这是您修改后的 fiddle :http://jsfiddle.net/AYnaN/1/ .