html - 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的padding，所以我需要把anchor的宽高减去20px，否则会导致li溢出。这是做这样的事情的正确方法吗？我想如果以后我需要用更大的维度来改变图像，我总是需要记住将实际图像大小减去 2 倍的填充，有没有更简单的方法来实现这个(不必减去每次都迎合新的背景图片大小)？

Answer 1

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