html - 如何从相对位置增加高度中删除多余的空间？

我有一个悬停功能，允许用户更改密码类型输入中的显示/隐藏：

<label for="Password">Create a Password</label>
@Html.PasswordFor(m => m.Password)
<span class="input-hover password-show">SHOW</span>
<div class="validation-rules"></div>
<label for="ConfirmPassword">Confirm Password</label>
@Html.PasswordFor(m => m.ConfirmPassword);
<span class="input-hover confirmpassword-show">SHOW</span>


input + .input-hover{
    position: relative;
    display: inline-block;
    height: 46px;
    width: 50px;
    top: -46px;
    left: calc(100% - 70px);
    line-height: 46px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #B2B4B2;
    font-weight: bold;
    text-align: right;
    z-index: 10;
}

这会将46px添加到流中。所以我的输入和下一个标签之间的元素的高度为46px ...即使我的元素位于顶部：-46px;

我不能使用绝对值，因为我希望它是相对于当前输入而不是祖父母容器（必须响应并允许添加/删除DOM元素...验证规则。）。

边距：-46px;将身高恢复正常...之类的。似乎弄乱了左计算。

我可以对其进行调整，以使单词适合右侧，但是为什么在设置边距时将其向左移动：-46px; ？这没有任何意义。知道如何正确执行此操作吗？

这是摆弄我所拥有的东西：FIDDLE

谢谢！

最佳答案

我想当您设置margin: -46px时，您正在设置所有边距。因此，您将获得想要的margin-top: -46px，但同时也会得到margin-left: -46px。

当我只设置最低边距时，它对我有用：

margin: 0 0 -46px 0;

或：margin-left: -46px

PS。我想您还会获得更多空间，因为您的显示器是内嵌式的。如果使用display: block将其设置为margin-top: -46px;，则可以使其与div的底部齐平。