Html 在按钮内移动文本

有一个按钮。在按钮文本中。当你按下一个1像素的按钮时，如何移动文本，而不是用按钮本身移动，只移动里面的文本

<span class="button-wrapper">
      <a href="#" class="button">
           button text
      </a>
</span>

1.按钮包装-用作渐变边框 2.元素具有1px边距+背景渐变

---

如果我有从顶部填充的命令，单击按钮，按钮的大小会增加，但我只需要在标记中移动文本，而不移动按钮，如何移动？

可能值得使用正确的标记来正确实现所需的效果

<button class="button">
      <span href="#" class="innerButton">
           button text
      </span>
</button>

---

或者，对于单个输入按钮元素中的文本

<input id="submit" type="submit" value="Submit" />

---

我遇到了一个类似的问题，并按如下方式修复了它，尽管我不太明白为什么必须使用

float

。如对此有任何评论，将不胜感激

我使用

填充

使文本移动，方法是将1px加上左，再减去1px右+下。但出于某些我不明白的原因，仅此一项就将兄弟姐妹的盒子向下推了1px。不过，我们不希望按钮本身移动

HTML:

<p>
  <span class="button">third</span>
  <span class="button">fourth</span>
</p>

<p>
  <input type="button" class="button button2" value="fifth" />
  <input type="button" class="button button2" value="sixth" />
</p>

---

“第五个”和“第六个”的行为与我们希望的一样，因为我们添加了

float

您也可以提供CSS代码吗？您可以将相关的CSS/HTML粘贴到JSFIDLE中吗？您想在单击时移动1px还是想使移动持续？我想您可以更改“span”填充顶部或“a”填充顶部

#submit
{
    padding-top: 4px;
}
#submit:active
{
    padding-top: 6px;
}

<p>
  <span class="button">third</span>
  <span class="button">fourth</span>
</p>

<p>
  <input type="button" class="button button2" value="fifth" />
  <input type="button" class="button button2" value="sixth" />
</p>

.button {
  outline: none;
  background-color: blanchedalmond;
  border: 1px solid maroon;
  padding: 3px 10px 4px 10px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  line-height: 20px;
  margin: 0;
}

span.button {
  display: inline-block;
  text-indent: -9999px;
  width: 20px;
  height: 20px;  
}

p {
  background-color: magenta;
  overflow: auto;
}

.button2 {
  float: left;
  margin-right: 4px;
}

.button:active {
  background-color: red;
  border: 1px solid brown;
  padding: 4px 9px 3px 11px;
  margin-top: 0px;
}