Question

我将以下图片放在页面顶部。

<body>
    <form id="form1" runat="server" >
    <div>
        <div>
            <img src="Images/top.png" width="100%" height="115px" alt="top.png" />
        </div>
    </div>
    </form>
</body>

问题是图像的左侧，顶部，右侧和底部出现了一些填充。我不希望那里有填充物。换句话说，我希望图像顶部与页面的左侧和顶部齐平，并使其在页面宽度上伸展。我怎样才能以风格实现这一目标？

Answer 1

您需要使用CSS重置规则来重置浏览器样式，然后从那里构建。我使用http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

某些浏览器的默认样式为body元素提供了一个填充，有些浏览器给它一个边距。您需要删除两者才能使图像在所有浏览器中与视口齐平。

    body { margin: 0; border: 0 }

Answer 3

<img style="display: block; padding: 0; margin: 0;" ... />

然而，如果它的图像基本上是somesort的decoratin（即不是“content”或链接到另一个页面），我更喜欢将它用作父元素中的背景图像。

例如

#pseudo image {height：100px;宽度：200px; background：透明网址（路径/到/图像）滚动不重复左上角;}

当然，这样做只限于以实际尺寸显示图像，您必须将div设置为相同尺寸或更大尺寸。

帮助页面样式

3 个答案: