Html CSS3按钮向下推动整个div

我正在尝试使用自定义CSS3按钮生成器为我的网站按钮嵌入一些CSS3(http://www.cssportal.com/css3-button-generator/). 然而，这会产生一些恼人的问题。整个div向下推！包含它的div的CSS是：

.login {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #DDD;
    font-size: 14px;
}

和按钮的CSS：

.button {
font-family: Arial;
  color: #ffffff;
  font-size: inherit;
  padding: 7px;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666;
  border: solid #003366 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#001a33));
  background: -moz-linear-gradient(top, #42aaff, #001a33);
}

---

如果你想检查网站本身的html，它是CSS规则填充的#导航栏：7px导致它被按下。目前，您使用绝对定位将所有这些元素向下推10像素。你要么把一个按钮往上拉，加上负的边距（通常是个坏主意），要么把其他的都往下推。通常，在这种情况下，尽量保持元素的高度相同（即：为较小的元素添加填充）。

事实上，这就是问题所在。我在span的文本区域旁边还有一个按钮，这个按钮被按下了，但现在没有了。所以，如果我想保持按钮的填充，我应该做的是将填充添加到与它内联的每个rest元素中？