将奇怪的行为与表单输入垂直对齐答案

【问题标题】：vertical align weird behaviour with form input将奇怪的行为与表单输入垂直对齐
【发布时间】：2014-02-09 06:05:46
【问题描述】：

我正在使用引导表单元素，并注意到输入类型文本的垂直对齐属性会以某种方式影响附近标签的定位。

顺便说一下，这种输入类型的文本具有来自引导样式的底部边距 10px。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        input[type="text"] {
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    <form action="">
        <span>Name</span>
        <input id="name" type="text">     
    </form>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

当我设置时：

        input[type="text"] {
            vertical-align: baseline;
        }

我得到正常定位：

但是当我设置时：

        input[type="text"] {
            vertical-align: top;
        }

我期待看到输入元素会被定位，但 insted label 元素改变了它的位置

当我设置时：

        input[type="text"] {
            vertical-align: bottom;
        }

我再次看到定位应用于标签元素：

我一直在想这样的事情会发生：

body 元素将定义标签和输入元素所在的行框的行高。之后，label 和 input 元素都将根据其 vertical-align 属性相对于 body 元素定义的 line box 进行定位。

但是在这里我看到输入元素的垂直对齐属性会以某种方式影响标签元素。有人可以解释为什么会这样吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果您从屏幕上删除所有其他元素，问题可能会变得更清楚。

使用默认设置vertical-align:baseline，输入的基线与跨度的基线对齐。我已将元素的轮廓设为红色，并将它们对齐的位置的 y 坐标设为蓝色。这就是将垂直对齐保留为默认值时行框的样子。

现在是否将两个元素对齐到顶部

或到底部

总体布局保持不变。由于跨度和输入在顶部都没有边距，因此没有理由在此行框和之前的元素（或窗口顶部）之间创建任何空间。
请记住，跨度开始时在屏幕上没有固定位置。它在线路框中的垂直点可以变化；就像您在行框中的其他地方有更大字体大小的跨度一样。

希望一切顺利！

因此，您最初问题的解决方案就是对输入应用一些上边距。（或者，也可以选择跨度，但您也应该将其显示更改为内联块，因为跨度默认情况下不做边距。）

【讨论】：