html - 添加填充会向元素添加不需要的宽度，修复了吗？ CSS

Question

我所有寻找答案的搜索都失败了，所以就这样吧。我正在尝试向包裹在 div 内的按钮添加底部填充，并且我想将按钮向上移动到更靠近顶部的位置。但是，添加填充时，它只会拉伸(stretch)按钮的宽度和高度。抱歉，如果这真的很简单，我是编码新手!

.div {
background-image: url('images/banner.png');
width: 920px;   
height: 280px;
border-radius: 5px;

.button {
width: 226px;
height: 57px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #f1efea; /* layer fill content */
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIyNiA1NyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ijk5LjUlIiB4Mj0iNTAlIiB5Mj0iMC40OTk5OTk5OTk5OTk5OSUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWM5NTMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWZhNzU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMjYiIGhlaWdodD0iNTciIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
background-image: -moz-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */

Answer 1

您需要做的就是更改该元素的盒子模型。

.button {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

这可确保填充量不会添加到总体宽度或高度中，并且无论填充值或边框值如何，宽度和高度都保持您指定的大小。

想了解更多请阅读这篇文章:http://paulirish.com/2012/box-sizing-border-box-ftw/