时间戳

首页 > 解决方案 > 如何从增加高度的相对位置中删除额外的空间？

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 的高度......即使我的元素设置为 top: -46px;

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

边距：-46px；将高度拉回到正常水平......有点。它似乎弄乱了左计算。

我可以调整它使这个词适合，但是为什么当你设置边距时它会向左移动：-46px; ? 这没有任何意义。知道如何正确执行此操作吗？

这是一个小提琴，看看我有什么：FIDDLE

谢谢！

标签： htmlcssposition

解决方案

我认为当您设置时，margin: -46px您正在设置所有边距。所以你得到了margin-top: -46px你想要的，但你也得到了margin-left: -46px。

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

margin: 0 0 -46px 0;

或者：margin-left: -46px

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

推荐阅读