2012-03-27 19 views
0

Eine übliche Art und Weise zu setzen, zum Beispiel ein Menüreiter mit Hintergrund ist wie folgt:CSS padding und Dimensionen

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

Dann mit CSS

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

alles schön und gut, aber dann habe ich für jede <li> entschieden Bild zu verwenden, wird die Bildabmessungen angenommen 200x200px, so ich folgendes hinzu:

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

Aber da der Link im Inneren eine Auffüllung von 10px hat, muss ich 20px von der Breite und Höhe des Ankers subtrahieren, sonst wird li überlaufen. Ist das der richtige Weg, solche Dinge zu tun? Ich stelle mir vor, wenn ich später das Bild mit einer größeren Dimension ändern muss, muss ich immer daran denken, die tatsächliche Bildgröße um das Zweifache der Polsterung zu subtrahieren, gibt es einen einfacheren Weg dies zu erreichen (ohne subtrahieren zu müssen) jedes Mal, um die neue Hintergrundbildgröße zu berücksichtigen)?

Antwort

1

Verwenden Sie box-sizing: border-box. Dann enthält die Breite Padding und Rahmen, anstatt sie auszuschließen.

+0

Hallo, danke für die Antwort :) Gibt es ein CSS2 Äquivalent, das das gleiche tut? –

+0

Nicht, dass ich mir dessen bewusst bin. Das einzige "Äquivalent" ist das manuelle Anpassen der "Breite" nach Bedarf. –

+0

Hm ok .. das ist eine akzeptierte Praxis, ya? –