悬停时孩子的“添加填充”不会忽略父母的填充，文本会向下移动

Question

我正在尝试创建一个链接悬停效果，即悬停时背景变为白色，白色背景从中心（中心到顶部，中心到底部）扩展。

父div元素现有的顶部/底部填充为24px，因此内部链接元素位于div的中心（距div顶部24px）。当鼠标悬停在链接上时，该链接的顶部/底部填充从原来的0px更改为24px，据推测会增加子元素（链接）的大小以覆盖整个父div。同时，孩子的背景变为白色，赋予动画效果。

但是，当我尝试此操作（见下文）时，子元素（链接）的顶部停留在同一位置（我认为尊重父级的24px填充）而不是向上移动，并且子元素向下生长。结果，文本（居中）也向下移动。为什么孩子不像下面的示例代码那样忽略父母的填充物，为什么孩子不从原始中心向上和向下生长？

谁能想到为什么会这样？我对父母和孩子使用与下面相同的代码。

下面是我在网上找到的执行此操作的代码示例。在此链接中，也可以将其视为示例3：

https://codepen.io/Calloumi/pen/vndlH

注意：以下演示有效。在我的网页（下图）中，悬停效果不起作用。

HTML：

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
div {
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid blue;
}

#nav-3 {
  background: #EEA200;
}

.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;

}
.link-3:hover {
  background-color: #eeeeee;
  color: #EEA200;
  padding: 24px 10px;
}

<div id="nav-3">
    <a class="link-3" href="#">Home</a>
    <a class="link-3" href="#">About</a>
    <a class="link-3" href="#">Contact</a>
    <a class="link-3" href="#">Shop</a>
</div>