标签：tst 不同的 底部 不同 上下 margin 输入框 高度 color
很多时候, 文字和 input和button它们的 顶端是在同一条先上, 但是并不是 垂直居中对齐, 这个 就不好看.
其时有很多理论, 讲的也很复杂, 说什么文本 的top, middle ,baseline , bottom 四根线, 等等 那些我们都不管, 可以这样简单的理解:
把文本/input输入框/button等 都看作是放在 各自一个盒子中的东西, 默认的时候: 当它们在同一行中时, 这些盒子的顶端是对齐的, 即顶端是在同一根线上, 顶端是对齐的, 是盒子不一定是文本顶端对齐; 而且各自盒子 里面的东西(文字) 是在各自盒子的垂直中间的
但是, 问题的根本就在于 这些盒子的 高度 是不同的! 你可以想象一下, 不同高度的盒子, 盒子顶端放在一样高度时, 里面的东西都处于盒子的一半高度时, 盒子里的东西肯定不在同一个高度, 肯定是高的高, 低的低
比如 bs的按钮的高度就是: 按钮中的文字的高度是 20px; 按钮内文字还有上下padding是6px, 所以按钮的高度就是 32px;
所以, 设置 文本所在的 span的 行高为 32px, 就刚好能保证 文本和button(实际上button中的文字)在(基本上, 不保证绝对)同一高度,就是在高度上基本垂直居中对齐.
所以说, bs中的行高1.428, 基本上就是 20px, bs的文档中说的, Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin） 它说1/2行高(即10px), 就说明默认 的 行高是 20px;
其他高度尺寸 直接从调试器computed上看.
怎样让一行中的 文字 input输入框 按钮button它们在同一个高度上? 它们中的文字 是 垂直居中对齐
标签：tst 不同的 底部 不同 上下 margin 输入框 高度 color
原文地址：https://www.cnblogs.com/bkylee/p/12384783.html
