CSSのパディングと寸法

入れて通常の方法、例えば、バックグラウンドでメニュータブを次のようにされています。そして、CSSCSSのパディングと寸法

#main-nav li { float:left; margin-right:10px; list-style-type:none; } 
#main-nav li a { display:block; padding:10px }

ですべてが罰金とダンディですが、その後私

<ul id="main-nav"> 
    <li><a href="url1.php">Menu 1</a></li> 
    <li><a href="url2.php">Menu 2</a></li> 
</ul>

各<li>に画像を使用することを決定し、画像の大きさを想定することは200x200pxですので、私は次の行を追加します。

#main-nav li a { 
    display:block; padding:10px; 
    background:url(/img/tab-bg.png) transparent no-repeat; 
    width:200px; height:200px; 
}

しかし、内部のリンクが10pxのパディングを持っているので、アンカーの幅と高さから20pxを引く必要があります。そうしないと、liがオーバーフローします。このようなことをする正しい方法ですか？私が想像しているのは、私が大きな次元のものでイメージを変更する必要がある場合、私は常にパディングの2倍の実際のイメージサイズを引くことを覚えておく必要があります。これを達成する簡単な方法があります新しい背景画像のサイズに対応するたびに）？

出典

2012-03-27 Andreas Wong