如何从相对位置添加高度中删除多余空间?

时间:2018-06-11 17:13:48

标签: html css position

我有一个悬停,允许用户在密码类型输入上显示/隐藏:

<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;

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

保证金:-46px;拉高度恢复正常......有点儿。它似乎弄乱了左计算。

我可以调整它使单词适合,但为什么在设置margin时它会向左移动:-46px; ?它没有任何意义。知道如何正确地做到这一点吗?

这是一个小提琴,看看我有什么:FIDDLE

谢谢!

1 个答案:

答案 0 :(得分:1)

我认为当您设置margin: -46px时,您正在设置所有边距。因此,您获得了您想要的margin-top: -46px,但您也获得了margin-left: -46px

当我只设置下边距时,它对我有用:

margin: 0 0 -46px 0;

或:margin-left: -46px

PS。我认为您还获得了额外的空间,因为您的显示器是内联块。如果您使用display: block将其设置为margin-top: -46px;,则可以将其与div的底部齐平。