浮动右侧导致垂直偏移2px

Question

我正在设计一个登录模式窗口。我遇到了“忘记密码？”的垂直对齐问题链接。

我在同一行中使用以下代码（对于“记住我”）和右（对于“忘记密码？”）对齐。

​​

单独使用时，该片段完美的作品。但是，在我的模式窗口中，“忘记密码？”由于某种原因，链接垂直向上移动2px。

我试图通过在“忘记密码？”中插入一个类似的结构（在上述结构之前）找到对齐的区别。链接有一个margin-left值。

<div> 
 
    <span> 
 
    <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label> 
 
    </span> 
 
    <a href="password_retrieve.php" style="margin-left:150px;">Forgot password?</a> 
 
</div>

我用margin-top完美重叠这两个结构。

模态窗口以外，我得到完美的重叠。 (Code)

然而，模式里面， “忘记密码？”链接不完全重叠。 (Code)

我知道我可以通过添加margin-top: 2px;到a标记为“忘记密码？”解决了这个问题。但我想知道这种行为背后的原因。请让我知道我出错的地方。

Answer 1

它与垂直对齐有关。 Vertical align仅适用于内联级别和表格单元格 - 块级别元素不在此组中。
vertical-align的默认值为baseline，正如名称所示，它将内联元素的所有内容与基线对齐。
现在，当您将元素向右或向左移动时，它们的显示属性将被浏览器自动更改为display:block（并且无法覆盖此属性）。因此，浮动元素的内容的垂直对齐也会发生变化 - vertical-align将停止对这些元素的意义。我创建了小提琴以显示this here。
这解释了您的垂直2像素浮动链接上的顶部，这将简单地对齐到其父项的顶部边缘。
要证明的是，仅仅适用vertical-align: top;到非浮动元素的<a>标签（顺便说一下，我需要改变margin-left到146px，以防止此链接换到另一条线路，重现整个行为）。
现在，你有你的“完美重叠”，但真正的是要解决这个问题：

我会建议使用Flexbox，就代替花车，所以你的代码可能是这样的：

HTML：

<div style="margin-top: -19px; display: flex;justify-content: space-between;align-items: baseline;"> 
    <span> 
     <input type="checkbox" style="margin-left:0;vertical-align:-1px;"><label>Remember me</label> 
    </span> 
    <a href="password_retrieve.php">Forgot password?</a> 
</div> 

我已经包含了对父母的div容器所有的CSS内联，所以你需要将它移动到外部文件，但是你有一个想法。
因此，忘掉浮动，删除清除浮动的div，也许开始使用flexbox。
Browser support for Flexbox现在是相当不错的，甚至一些tweener语法涵盖甚至IE10。

希望这是有道理的。