1

背景画像 (css スプライト) を使用しているロゴ リンクがあります。すべて正常に動作しますが、リンクの上部に 20 ピクセルのパディングを追加しようとすると (ユーザーがリンクをクリックするためのスペースを増やすため)、背景画像が下に移動しません。これが私のcssです：

a {
    background-image:url("sprite.png");
    background-repeat:no-repeat;
    display:block;
    height:70px;
    width:70px;
    padding-top:20px; /* give top of the link more click space */
}

そして私のhtml：

<a href="#" style="background-position:0 0;"></a>


私は何を間違っていますか？
編集：皆さんは当初の目標を見逃していると思います。私の目標は、ロゴのリンクをクリックするスペースを増やすことです。マージンを使用すると、要素のリンクが押し下げられ、最初に望んでいたようなクリック スペースが増えません。

4

2 に答える 2

0

パディングは背景画像には影響しません。リンクのヒット領域に影響を与えるには、パディングを追加してから、背景の y オフセットを同じ量だけ変更します。

a
{
    padding-top: 10px;
    background-position: 0px 10px;
}

これは、動作を示すフィドルです

于 2012-06-16T03:09:46.060 に答える
0

margin プロパティをそのまま使用してみてください

 margin-top:20px
于 2012-06-16T03:10:39.900 に答える