css填充和尺寸

Question

放置的常用方法，例如带背景的菜单选项卡如下：

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

然后用css

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

一切都很好，但是后来我决定为每个<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倍，是否有更简单的方法来实现这一点（无需减去每次都要迎合新的背景图片尺寸）？

Answer 1

使用box-sizing: border-box。然后宽度将包括填充和边框，而不是排除它。