1

我有一个名为 gif.gif 的徽标，我想做的是将它放在左上角。目前有一个差距，我不想要填充或边距。

这是我的 html 和 css

CSS

#header, .img 
margin:0px;
padding:0px;

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
    </head>
    <body>
        <div id="header">
            <div class="logo">
                <a href="https://www.google.co.uk"/><img src="gif.gif"/></a>
            </div>
        </div>
    </body>
</html>
4

4 回答 4

1

尝试这个：

body
{
margin:0px;
padding:0px;

}
于 2013-05-13T20:49:25.073 回答
0

在你开始做任何事情之前尝试重置你的css。

<style type="text/css">
    * {
        margin:0;
        padding:0;
        list-style:none;
        vertical-align:baseline;
    }
</style>

我用上面的 css reset 做了一个简单的测试，效果很好。只需粘贴在您的 html 文件中的所有 css 之前。

于 2013-05-13T20:48:27.153 回答
0

添加到正文：

body{margin:0px; padding:0px;}

如果您使用 reset.css 或 normalize.css，您可以消除此类问题

于 2013-05-13T23:39:41.343 回答
0

考虑纯粹在 CSS 中处理它，像这样；

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="foo.css" type="text/css" /><!-- Footer Stylings -->
        <style>
            html, body {
                margin: 0px;
                padding: 0px;
            }

            #header {
                margin: 0px auto;
                width: 960px;
            }

            .logo {
                display: block;
                width: 200px;
                height: 200px;
                background-image: url('gif.gif');
            }

            .logo:hover {
                /* Some hover styling here */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <a href="https://www.google.co.uk" class="logo"></a>
        </div>
    </body>
</html>

您将使您的a标签成为block（非内联）。我假设大小为 200x200 像素。您可以根据自己的喜好进行更改。a标记仍将保持其超链接属性，但显示方式不同。

于 2013-05-13T20:46:04.240 回答