Question

我有一个名为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>

Answer 1

试试这个：

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

}

Answer 2

考虑纯粹在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像素。您可以根据自己的喜好进行更改。 <{1}}标记仍将保留其超链接属性，但显示方式不同。

Answer 3

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

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

我使用上面的css重置进行一个简单的测试并且工作正常。只需粘贴到html文件中的所有css之前。

Answer 4

添加到身体：

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

如果您使用reset.css或normalize.css

，则可以消除此类问题

简单的HTML和CSS协助

4 个答案: