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 に答える