Question

A usual way to put, for example a menu tab with background is as follows:

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

Then with css

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

All is fine and dandy, but then I decided to use image for each <li>, supposing the image dimensions is 200x200px, so I add the following:

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

But since the link inside has a padding of 10px, I need to substract 20px from width and height of the anchor or else it will cause li to overflow. Is this the correct way of doing things like this? I imagine if later down the road I need to change the image with a bigger dimension one, I will always need to remember to substract the actual image size by 2 times the padding, is there a simpler way of achieving this (without having to substract everytime to cater for the new background image size)?

Answer 1

Use box-sizing: border-box. Then the width will include padding and border, rather than excluding it.