Как убрать лишнее пространство из относительной позиции, добавив высоту?

Question

У меня есть всплывающее окно, которое позволяет пользователю переключаться с показа / скрытия при вводе типа пароля:

<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 ... хотя мой элемент устанавливает top: -46px;

Я не могу использовать абсолютный, потому что я хочу, чтобы он был относительно текущего ввода, а нек контейнеру дедушки (должен отвечать и добавлять / удалять элементы DOM ... правила проверки.).

margin: -46px;возвращает высоту в норму ... вроде.Похоже, что портит левый calc.

Я могу настроить его так, чтобы слово подходило по размеру, но почему оно перемещает его влево при установке поля: -46px;?это бессмысленно.Любая идея, как сделать это правильно?

Вот скрипка, чтобы увидеть, что у меня есть: FIDDLE

Спасибо!

Answer 1

Я думаю, что когда вы устанавливаете margin: -46px, вы устанавливаете все поля.Таким образом, вы получаете margin-top: -46px, что вы намереваетесь, но вы также получаете margin-left: -46px.

Это сработало для меня, когда я установил только нижнее поле:

margin: 0 0 -46px 0;

или: margin-left: -46px

PS.Я думаю, что вы также получаете дополнительное пространство, потому что ваш дисплей встроенный блок.Если вы установите его на display: block с помощью margin-top: -46px;, вы можете сделать его заподлицо с нижней частью div.