将 div 定位在图像下方时获得某种边框？答案

【问题标题】：Getting some sort of border when positioning a div below an image?将 div 定位在图像下方时获得某种边框？
【发布时间】：2026-01-30 23:40:01
【问题描述】：

所以我有一个宽度为 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% 的宽度。

【问题讨论】：

标签： html css border positioning

【解决方案1】：

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

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

这是你修改后的小提琴：http://jsfiddle.net/AYnaN/1/。

【讨论】：